SKRIPSI

RANCANG BANGUN SISTEM INFORMASI LAYANAN

PENGADUAN PELANGGARAN PERATURAN DAERAH
BERBASIS WEB PADA SATPOL PP KOTA TANGERANG
SELATAN
Sebagai Salah Satu Syarat Untuk Memperoleh Gelar Sarjana

Sistem Informasi Fakultas Sains dan Teknologi

Universitas Islam Negeri Syarif Hidayatullah Jakarta

ALDINO WIDYA KURNIAWAN

1113093000002

PROGRAM STUDI SISTEM INFORMASI

FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH

JAKARTA

2020 M / 1441 H

i
 SKRIPSI

RANCANG BANGUN SISTEM INFORMASI LAYANAN

PENGADUAN PELANGGARAN PERATURAN DAERAH
BERBASIS WEB PADA SATPOL PP KOTA TANGERANG
SELATAN
Sebagai Salah Satu Syarat Untuk Memperoleh Gelar Sarjana

Sistem Informasi Fakultas Sains dan Teknologi

Universitas Islam Negeri Syarif Hidayatullah Jakarta

ALDINO WIDYA KURNIAWAN

1113093000002

PROGRAM STUDI SISTEM INFORMASI

FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH

JAKARTA

2020 M / 1441 H

ii
iii
iv
v
 ABSTRAK

Aldino Widya Kurniawan - 1113093000002, Rancang Bangun Sistem Informasi

Layanan Pengaduan Pelanggaran Peraturan Daerah Berbasis Web pada Satpol PP
Kota Tangerang Selatan, dibawah bimbingan A’ang Subiyakto, M.Kom., Ph.D, dan
Nida’ul Hasanati, S.T., MMSI.

Satpol PP Kota Tangerang Selatan merupakan salah satu instrumen yang dimiliki
oleh Pemerintah Daerah Kota Tangerang Selatan. Satpol PP Kota Tangerang
Selatan bertugas menindak pelanggaran Peraturan Daerah yang dilaporkan oleh
masyarakat kota Tangerang Selatan. Penindakan pelanggaran Peraturan Daerah
sangat penting dalam mewujudkan ketertiban dalam masyarakat dan menjaga
ketentraman lingkungan kota Tangerang Selatan. Saat ini prosedur lapor
pelanggaran Peraturan Daerah yang berjalan masih manual dan memiliki banyak
kelemahan dan kekurangan sehingga menyebabkan kinerja organisasi menjadi
terhambat dan belum mampu menunjang segala kebutuhan yang diinginkan
organisasi dan masyarakat mulai dari proses input laporan hingga manajemen
laporan yang cukup memakan waktu. Penelitian ini bertujuan untuk menganalisis
dan merancang suatu sistem informasi pelaporan berbasis web yang dibutuhkan
oleh organisasi. Merancang dan mendesain sistem informasi pelaporan
menggunakan metode Rapid Application Development (RAD) sebagai metode
pengembangan sistem dan Unified Modelling Language (UML) sebagai alat
pemodelannya. Fungsi yang dirancang pada sistem ini terdiri dari melaporkan
pelanggaran daerah, melakukan pelacakan laporan yang diinput, dan memanajemen
laporan yang ada. Dari penelitian ini dihasilkan sebuah aplikasi web Sistem
Informasi Layanan Pengaduan Pelanggaran Peraturan Daerah, yang menjadi salah
satu solusi bagi permasalahan organisasi tersebut.

Kata Kunci: Pelaporan, Rapid Application Development (RAD), Sistem Informasi,

Unified Modelling Language (UML)

V Bab + 123 Halaman + 47 Gambar + 29 Tabel + Daftar Pustaka + Lampiran

28 Buku (2005 - 2018), 6 Jurnal (2014-2019)

vi
 KATA PENGANTAR

Assalamu’alaikum Wr. Wb.

Alhamdulillahirabbil’alamin, puji syukur kepada Allah SWT yang atas

rahmat-Nya, yang telah memberi kemudahan dan kelancaran bagi penulis dalam

menyelesaikan laporan skripsi ini dengan baik. Shalawat serta salam semoga

senantiasa tercurah kepada Nabi Muhammad SAW yang telah memberikan

tauladan bagi seluruh umat Islam hingga akhir zaman.

Penyusunan skripsi ini merupakan salah satu syarat untuk memperoleh gelar

sarjana (S-1) pada Program Studi Sistem Informasi, Fakultas Sains dan Teknologi,

Universitas Islam Negeri Syarif Hidayatullah Jakaarta. Skripsi ini berjudul

“Rancang Bangun Sistem Informasi Layanan Pengaduan Pelanggaran

Peraturan Daerah Berbasis Web pada Satpol PP Kota Tangerang

Selatan”.

Pada kesempatan kali ini pula, penulis ingin menyampaikan rasa terima

kasih penulis kepada pihak-pihak yang telah mendukung dan membantu penulis

dalam menyelesaikan skripsi ini, rasa terima kasih sebesar-besarnya penulis

sampaikan kepada:

1. Ibu Prof. Dr. Lily Surraya Eka Putri, M.Env.Stud selaku Dekan

Fakultas Sains dan Teknologi Universitas Islam Negeri Syarif

Hidayatullah Jakarta.

2. Bapak A’ang Subiyakto, M.Kom selaku Ketua Program Studi Sistem

Informasi, Fakultas Sains dan Teknologi UIN Syarif Hidayatullah

Jakarta.
vii
3. Ibu Nida’ul Hasanati, S.T.MMSI selaku Sekretaris Program Studi

Sistem Informasi Fakultas Sains dan Teknologi UIN Syarif

Hidayatullah Jakarta.

4. Bapak A’ang Subiyakto, M.Kom selaku dosen pembimbing I yang

telah mengarahkan penelitian, memberikan ilmu, motivasi, dan

bimbingan dalam menyelesaikan skripsi ini.

5. Ibu Nida’ul Hasanati, S.T.MMSI selaku dosen pembimbing II yang

telah mengarahkan penelitian, memberikan ilmu, motivasi, dan

bimbingan dalam menyelesaikan skripsi ini.

6. Bapak Muksin selaku pembimbing lapangan penulis yang telah

memberikan arahan, ilmu, semangat dan dukungan kepada penulis.

7. Dosen-dosen Program Studi Sistem Informasi yang telah memberikan

ilmunya selama penulis duduk di bangku perkuliahan.

8. Staff akademik Program Studi Sistem Informasi UIN Syarif

Hidayatullah Jakarta yang telah memberikan banyak bantuan terhadap

penyusuan skripsi ini.

9. Kedua orang tua penulis, Bapak Dwijo Siswoyo dan Ibu Nur Khasanah

yang selalu memberikan semangat, kasih sayang yang melimpah dan

doa yang tiada henti sehingga penulis dapat menyelesaikan skripsi ini.

10. Sahabat-sahabat penulis yang selalu menemani selama perkuliahan,

Aditya Teguh, Alvin Handrianto Saputra, Arini Nurillah, Arya Listio

Darmaputra, Jia Hatimah, Latifah Nur Kamilah, M. Rayhan Firdausi,

M. Ryanda Putra, Mawaddatus Su’udah, Moriza Husna, Nita Alfiani,

viii
 Octo Wihardi, Sari Damarwulan, Tyas Rosiana Dewi, dan Zulfah

Melinda.

11. Seluruh teman-teman Sistem Informasi 2013 terima kasih untuk

kebersamaannya dan kerjasamanya selama ini.

12. Dan seluruh pihak-pihak yang terkait dan banyak berjasa dalam proses

penyelesaian skripsi ini yang tidak dapat disebutkan satu persatu namun

tidak mengurangi rasa terima kasih sedikitpun dari penulis.

Penulis menyadari bahwa dalam penyusunan skripsi ini masih jauh dari kata

sempurna, serta masih banyak kekurangan baik dalam penulisan materi maupun

dalam susunan bahasanya. Untuk itu kiranya, pembaca dapat memaklumi atas

kekurangan dalam skripsi ini.

Akhir kata penulis berharap semoga laporan ini dapat bermanfaat bagi

penulis khususnya dan bagi para pembaca pada umumnya.

Wassalamualaikum Wr. Wb.

Jakarta, 9 Agustus 2020

Aldino Widya Kurniawan

1113093000002

ix
 DAFTAR ISI

ABSTRAK ............................................................................................................ vi
KATA PENGANTAR ......................................................................................... vii
DAFTAR ISI .......................................................................................................... x
DAFTAR GAMBAR .......................................................................................... xiv
DAFTAR TABEL .............................................................................................. xvi
BAB I ...................................................................................................................... 1
1.1 Latar Belakang ....................................................................................... 1
1.2 Identifikasi Masalah ............................................................................... 8
1.3 Rumusan Masalah .................................................................................. 9
1.4 Batasan Masalah..................................................................................... 9
1.5 Tujuan Penelitian ................................................................................. 10
1.6 Manfaat Penelitian ............................................................................... 11
1.6.1. Manfaat Bagi Penulis .................................................................... 11
1.6.2. Bagi Instansi .................................................................................. 12
1.7 Metodologi Penelitian........................................................................... 12
1.7.1 Metode Pengumpulan Data .......................................................... 13
1.8 Metodologi Pengembangan Sistem ..................................................... 14
1.8.1 Metode Pengembangan Sistem .................................................... 14
1.9 Sistematika Penulisan .......................................................................... 16
BAB II .................................................................................................................. 19
2.1. Definisi Rancang Bangun .................................................................... 19
2.2. Konsep Dasar Sistem............................................................................ 19
2.2.1 Definisi Sistem ............................................................................... 19
2.2.2 Karakteristik Sistem ..................................................................... 20
2.2.3 Klasifikasi sistem ........................................................................... 22
2.3. Konsep Dasar Informasi ...................................................................... 23
2.3.1 Definisi Informasi .......................................................................... 23
2.3.2 Siklus Informasi ............................................................................ 24
2.3.3 Nilai Informasi ............................................................................... 24

x
 2.3.4 Kualitas Informasi ........................................................................ 27
2.4. Konsep Dasar Sistem Informasi .......................................................... 29
2.4.1. Definisi Sistem Informasi ............................................................. 29
2.4.2. Komponen Sistem Informasi ........................................................ 30
2.5. Konsep Dasar Laporan ........................................................................ 31
2.5.1. DefinisiLaporan ............................................................................. 31
2.6. Konsep Dasar Peraturan Daerah ........................................................ 32
2.7. Konsep Dasar Pelanggaran Peraturan Daerah ................................. 34
2.8. Rapid Application Development (RAD) ............................................... 35
2.9. Unified Modeling Language (UML) .................................................... 37
2.9.1. Use-Case Diagram ......................................................................... 38
2.9.2. Activity Diagram ............................................................................ 40
2.9.3. Sequence Diagram ......................................................................... 42
2.9.4. Class Diagram ................................................................................ 43
2.10. Konsep Dasar Website ...................................................................... 45
2.10.1. DefinisiWebsite ............................................................................... 45
2.10.2. Jenis-Jenis Website ........................................................................ 45
2.11. PHP: Hypertext Preprocessor ........................................................... 47
2.11.1. Keunggulan PHP ........................................................................... 48
2.12. Konsep Dasar Framework Codeigniter............................................ 49
2.12.1. Pengertian Framework .................................................................. 49
2.12.2. Konsep Dasar Model View Controller (MVC)............................. 50
2.12.3. Pengertian Codeigniter .................................................................. 52
2.13. Konsep Dasar Database.................................................................... 54
2.13.1. Definisi Data .................................................................................. 54
2.13.2. Pengertian Database ...................................................................... 55
2.13.3. MySQL ............................................................................................ 56
2.14. Pengujian Sistem ............................................................................... 57
2.14.1. Pengertian Testing ......................................................................... 57
2.14.2. White Box Testing .......................................................................... 57
2.14.3. Black Box Testing .......................................................................... 59
BAB III ................................................................................................................. 62

xi
 3.1. Metode Pengumpulan Data ................................................................. 62
3.1.1. Observasi........................................................................................ 62
3.1.2. Wawancara .................................................................................... 63
3.1.3. Studi Pustaka ................................................................................. 64
3.1.4. Studi Literatur Sejenis.................................................................. 64
3.2. Metode Pengembangan Sistem............................................................ 70
3.2.1. Tahap Requirement Planning ....................................................... 71
a. Desain Proses ........................................................................................ 72
b. Desain Database .................................................................................... 73
c. Desain Interface .................................................................................... 74
3.2.2. Tahap Implementation .................................................................. 74
3.2.3. Tahap Testing ................................................................................ 74
3.3. Kerangka Penelitian ............................................................................. 75
BAB IV ................................................................................................................. 77
4.1. Gambaran Umum Satpol PP Kota Tangerang Selatan .................... 77
4.2. Fase Requirement Planning.................................................................. 80
4.2.1. Analisis Permasalahan .................................................................. 80
a. Analisis Sistem Berjalan ...................................................................... 81
b. Narasi Sistem Berjalan ........................................................................ 81
c. Identifikasi Masalah Sistem Berjalan ................................................. 82
4.2.2. Analisis Sistem Usulan .................................................................. 83
a. Sistem Usulan ........................................................................................ 83
b. Narasi Sistem Usulan ........................................................................... 83
4.3. Fase Workshop Design .......................................................................... 84
4.3.1. Desain Proses ................................................................................. 84
a. Use Case Diagram ................................................................................. 84
1. Identifikasi Aktor ................................................................................. 84
2. Identifikasi Use Case ............................................................................ 85
3. Pemodelan Use Case Diagram ............................................................. 86
4. Use Case Narrative ................................................................................ 87
b. Activity Diagram .................................................................................... 93
4.3.2. Desain Database ........................................................................... 101

xii
 a. Class Diagram ..................................................................................... 101
b. Mapping Cardinality ........................................................................... 102
c. Spesifikasi Database ........................................................................... 104
d. Sequence Diagram............................................................................... 107
4.3.3. Tahap Pengujian Sistem ............................................................. 126
a. Black Box Testing................................................................................ 126
b. WhiteBox Testing ................................................................................ 130
BAB V................................................................................................................. 135
5.1. Kesimpulan ......................................................................................... 135
5.2. Saran .................................................................................................... 136

xiii
 DAFTAR GAMBAR

Gambar 1. 1 Siklus Rapid Application Development (Kendall, 2010) ............... 16

Gambar 2. 1 Karakteristik Sistem (Hutahean, 2015)........................................... 22
Gambar 2. 2 Siklus Informasi (Sutabri, 2012) .................................................... 24
Gambar 2. 3 Fase RAD Martin (Kendall & Kendall, 2003)................................ 36
Gambar 2. 4 Workshop Desain RAD (Kendall & Kendall, 2003) ...................... 37
Gambar 3. 1 Kerangka Penelitian ........................................................................ 75
Gambar 4. 1 Logo Satpol PP ............................................................................... 77
Gambar 4. 2 Struktur Organisasi Satpol PP Kota Tangerang Selatan ................. 79
Gambar 4. 4 Sistem Usulan ................................................................................. 83
Gambar 4. 5Use Case Diagram Sistem Informasi Layanan Pengaduan
Pelanggaran Peraturan Daerah .............................................................................. 87
Gambar 4. 6 Activity Diagram Lapor.................................................................. 94
Gambar 4. 7 Activity Diagram Track Laporan.................................................... 95
Gambar 4. 8 Activity Diagram Login Admin ..................................................... 96
Gambar 4. 9 Activity Diagram Konfirmasi Status .............................................. 97
Gambar 4. 10 Activity Diagram Manajemen Laporan ........................................ 98
Gambar 4. 11 Activity Diagram KlarifikasiLaporan ........................................... 99
Gambar 4. 12 Activity Diagram SelesaikanLaporan ......................................... 100
Gambar 4. 13 Activity Diagram Logout ............................................................ 101
Gambar 4. 14 Class Diagram Sistem Informasi Layanan Pengaduan Pelanggaran
Peraturan Daerah ................................................................................................. 102
Gambar 4. 15Mapping Cardinality Sistem Informasi Layanan Pengaduan
Pelanggaran Peraturan Daerah ............................................................................ 103
Gambar 4. 16 Sequence DiagramLapor ............................................................ 107
Gambar 4. 17 Sequence Diagram Track Laporan ............................................. 108
Gambar 4. 18 Sequence Diagram Login Admin ............................................... 108
Gambar 4. 19 Sequence DiagramValidasi Laporan .......................................... 109
Gambar 4. 20 Sequence Diagram Manajemen Laporan – Tolak Laporan ........ 109
Gambar 4. 21 Sequence Diagram Manajemen Laporan – Cetak Laporan ........ 110
Gambar 4. 22 Sequence DiagramKlarifikasi Laporan....................................... 111
Gambar 4. 23 Sequence DiagramKlarifikasi Laporan – Tolak Laporan ........... 111
Gambar 4. 24 Sequence DiagramKlarifikasi Laporan – Cetak Laporan ........... 112
Gambar 4. 25 Sequence DiagramSelesaikan Laporan....................................... 112
Gambar 4. 26 Sequence DiagramSelesaikan Laporan – Tolak Laporan ........... 113
Gambar 4. 27 Sequence DiagramSelesaikan Laporan – Cetak Laporan ........... 113
Gambar 4. 28 Sequence Diagram Logout ......................................................... 114
Gambar 4. 29 Tampilan Halaman Awal Sistem (Home)................................... 116
Gambar 4. 30 Tampilan Halaman Lapor ........................................................... 117
Gambar 4. 31 Tampilan Halaman Track Laporan ............................................. 118
Gambar 4. 32 Tampilan Halaman Login Admin ............................................... 118

xiv
Gambar 4. 33 Tampilan Halaman Dashboard Admin ....................................... 119
Gambar 4. 34 Tampilan Halaman Edit Data Pemasok ...................................... 120
Gambar 4. 35 Tampilan Halaman Detail Data Laporan .................................... 121
Gambar 4. 36 Tampilan Halaman Data Laporan yang Sudah Divalidasi ......... 122
Gambar 4. 37 Tampilan Halaman Data Laporan yang Sudah Diklarifikasi ...... 123
Gambar 4. 38 Tampilan Halaman Data Laporan yang Sudah Selesai............... 124
Gambar 4. 39 Tampilan Halaman Data Laporan yang Ditolak ......................... 125
Gambar 4. 40 Tampilan Halaman Cetak Laporan ............................................. 126
Gambar 4. 41 Flowgraph Sistem ....................................................................... 131

xv
 DAFTAR TABEL

Tabel 2. 1 Simbol-Simbol Use case Diagram (Sugiarti, 2018) ............................ 38

Tabel 2. 2 Simbol-simbol Activity Diagram (Sugiarti, 2018) .............................. 41
Tabel 2. 3 Simbol-simbol Sequence Diagram (Sugiarti, 2018)............................ 43
Tabel 2. 4 Simbol-simbol Class Diagram (Sugiarti, 2018) .................................. 44
Tabel 3. 1 Tabel Penelitian Sejenis ...................................................................... 65
Tabel 4. 1 Identifikasi Aktor ................................................................................ 85
Tabel 4. 2Identifikasi Use Case ............................................................................ 85
Tabel 4. 3Use Case Narrative Lapor .................................................................... 87
Tabel 4. 4Use Case Narrative Track Laporan ...................................................... 88
Tabel 4. 5Use Case Narrative Login Admin ........................................................ 89
Tabel 4. 6Use Case Narrative Konfirmasi Status ................................................. 90
Tabel 4. 7Use Case Narrative Manajemen Laporan............................................. 90
Tabel 4. 8Use Case Narrative Klarifikasi Laporan .............................................. 91
Tabel 4. 9Use Case NarrativeSelesaikan Laporan ............................................... 92
Tabel 4. 10Use Case Narrative Logout ................................................................ 92
Tabel 4. 11Tabel Laporan................................................................................... 104
Tabel 4. 12 Tabel File Laporan .......................................................................... 105
Tabel 4. 13 Tabel Status ..................................................................................... 106
Tabel 4. 14 Tabel Users ...................................................................................... 106
Tabel 4. 15 Pengujian Use Case Login .............................................................. 127
Tabel 4. 16 Pengujian Use Case Track Laporan ................................................ 127
Tabel 4. 17 Pengujian Use Case Login Admin .................................................. 127
Tabel 4. 18 Pengujian Use Case Manajemen Data Laporan .............................. 128
Tabel 4. 19 Pengujian Use CaseKlarifikasiData Laporan .................................. 128
Tabel 4. 20 Pengujian Use CaseSelesaikanData Laporan .................................. 129
Tabel 4. 21 Pengujian Use Case Logout ............................................................ 130
Tabel 4. 22 Keterangan node pada sistem .......................................................... 131
Tabel 4. 23 Independent Path ............................................................................. 132
Tabel 4. 24 Test Case ......................................................................................... 133

xvi
xvii
 BAB I

PENDAHULUAN

1.1 Latar Belakang

Sesuai hakikatnya selaku sebuah negara demokrasi, Negara

Kesatuan Republik Indonesia menerapkan otonomi daerah. Maknanya, Pemerintah

Pusat sebagai pemberi kewenangan tertinggi menyerahkan kedaulatan bagi

wilayah-wilayah bawahannya, dalam artian kenegaraan Republik Indonesia:

provinsi-provinsi, kabupaten-kabupaten, dan kota-kotanya, untuk mengurusi

urusan rumah tangganya dengan bebas sesuai dengan aspirasi masyarakatnya.

Otonomi daerah menciptakan kewenangan bagi daerah untuk menghasilkan

kebijakan daerah yang melayani, meningkatkan peran serta, memprakarsai, dan

memberdayakan masyarakat sehingga dapat mensejahterakan masyarakat.

Untuk mewujudkan otonomi daerah, diperlukan sebuah alat untuk

mengontrol masyarakat daerah masing-masing yang diberikan ke pemerintah

daerah. Oleh karena itu, dalam aplikasinya, wewenang yang diberikan oleh

Pemerintah Pusat dapat dipergunakan Pemerintah Daerah untuk membentuk

Peraturan Daerah sebagai sarana untuk mengontrol dan mengarahkan

masyarakatnya sesuai dengan aspirasi masyarakat. Sebagai bentuk perundang-

undangan yang lebih kuat, Peraturan Daerah menyampaikan aktualisasi

pelaksanaan otonomi daerah sesuai dengan karakteristik khas masing-dasing

daerah.

1
 Dalam ranah penyelenggaraan otonomi daerah, Pemerintah Daerah

diwakilkan pemimpin daerah beserta Dewan Perwakilan Rakyat Daerah (DPRD)

merancang Peraturan Daerah sebagai bentuk tugas eksekutifnya.Setelah dibentuk,

Peraturan Daerah harus ditegakkan oleh perangkat milik Pemerintah Daerah

sebagai bentuk memelihara ketentraman dan ketertiban umum. Salah satuinstrumen

milik Pemerintah Daerah adalah Satpol PP, atau singkatan dari Satuan Polisi

Pamong Praja. Sesuai fungsinya, Satpol PP merupakan pihak yang melakukan

penindakan bila ada pelanggaran Peraturan Daerah yang terjadi. Namun masyarakat

sebagai pihak yang dalam kesehariannya dapat memantau apabila terjadi

pelanggaran Peraturan Daerah di sekitar mereka kesulitan menghubungi Satpol PP,

padahal Satpol PP adalah pihak yang bertanggung jawab menindak pelanggaran

Peraturan Daerah yang terjadi di lingkungan masyarakat.

Dewasa ini, perkembangan teknologi yang melesat terlihat

signifikan dalam berbagai bidang. Dalam satu dekade terakhir ini, salah satunya

sangat terlihat dengan hadirnya berbagai aplikasi yang banyak membantu kegiatan

manusia. Banyak kegiatan yang umumnya harus dilakukan secara langsung

sekarang dapat dipermudah dengan adanya aplikasi, terutama dengan adanya

internet pula semakin mempermudah bagi masayarakat untuk mengakses layanan

yang diinginkan meski jarak tidak mendukung.

BPS menyebutkan jumlah masyarakat yg mengakses internet dalam

lima tahun terakhir meningkat pesat. Survei Sosial Ekonomi Nasional 2018

memaparkan bahwa 50,92 persen masyarakat di kota dan 26,56 persen masyarakat

di desa yang berusiadiatas 5 tahun sudah memakai aksesinternet. Berdasarkan fakta

2
tersebut, tingkat partisipasi internet masyarakat yang tinggi jelas dapat

dimanfaatkan oleh berbagai organisasi demi meringankan kegiatan sehari-hari

mereka, salah satunya adalah Satpol PP Kabupaten Tangerang Selatan.

Terdapat 140 pelanggaran sepanjang bulan Januari hingga Februari

2020 dari 12 kali penertiban PKL yang telah dilakukan Satpol PP Kota Tangerang

di sejumlah jalan utama Kota Tangerang. Dengan pelanggaran Perda Nomor 8

Tahun 2005 mengenai prostitusi menjadi yang paling sering ditemui. Meskipun

tidak ada pekerja seks komersil yang terjaring,selama Januari hingga Februari 2020

telah dilakukan 73 penertiban. Larangan pengedaran dan penjualan minuman

beralkohol juga merupakan Perda yang sering ditemui dilanggar. Selama bulan

Februari 2020, terdapat 35 pelanggar yang sudah ditertibkan dari sembilan

kecamatan yang ditindak, serta menertibkan delapan drum dan 852 botol minuman

keras merek Ciu. Namun, selama ini untuk melaporkan pelanggaran-pelanggaran

tersebut masyarakat masih harus melaporkan secara langsung ke kepolisian, yang

mana terdapat jeda waktu apabila melaporkan secara langsung, dan dapat

menggagalkan penindakan pelanggaran yang terjadi.

Dalam penelitian yang dilakukan oleh Lin Jun Wei, Wang Farn, dan

Chu Paulyang berjudul “Using Semantic Similarity in Crawling-Based Web

Application Testing” menjelaskan bahwa masalah yang sering dihadapi adalah

aturan berbasis pencocokan string untuk identifikasi topik masukan banyak

digunakan di crawler yang ada. Namun demikian, aturan untuk satu aplikasi web

mungkin tidak berfungsi untuk yang lain. Akibatnya, pengguna mungkin harus

merekonstruksi atau menyesuaikan aturan untuk baru untuk aplikasi yang

3
dibangun. Masalah lain dari pendekatan berbasis aturan untuk identifikasi topik

masukan adalah sulitnya menentukan topik jika ada banyak kandidat.Penelitian ini

dilakukan penelitian dengan melalui pendekatan semantic, berbeda dengan cara

lama, testing yang dilakukan dapat mempercepat proses testing dengan

memanfaatkan elemen DOM (Document Object Module). Hasil dari penelitannya

adalah teknik baru dan bahasa alami untuk mengatasi masalah pendekatan berbasis

aturan yang digunakan dalam pengujian aplikasi web berbasis crawling (Lin, Wang,

& Chu, 2017).

Penelitian yang di lakukan oleh Fard Amin Milani, Mirzaaghaei

Mehdi dan Mesbah Ali dengan judul “Leveraging Existing Tests in Automated Test

Generation for Web Applications” mendapati bahwa Pengujian berbasis DOM

(Document Object Module) bertujuan untuk membawa aplikasi ke state DOM

tertentu melalui serangkaian tindakan, seperti mengisi formulir dan mengklik

elemen, dan kemudian memverifikasi keberadaan atau properti (misalnya, teks,

visibilitas, struktur) elemen DOM tertentu di state itu. Status DOM pada dasarnya

adalah versi abstrak dari pohon DOM dari aplikasi web, yang ditampilkan di

browser web saat runtime. Aplikasi Testilizer digunakan dalam membantu proses

testing yang dilakukan dalam penelitian ini. Penggunaan aplikasi tersebut (yang

berbasiskan DOM pada javascript) mempunyai hasil yang cukup baik yaitu

peningkatan sebesar 65% dalam proses testing Input dan Outputnya (Fard,

Mirzagheei, & Mesbah, 2014).

Penelitian oleh Biagiola Matteo, Stocco Andrea, Ricca Filippo, dan

Tonella Paoloyang berjudul “Diversity-Based Web Test Generation” menjelaskan

4
bahwa strategi yang berbeda dapat diadopsi untuk menghasilkan kasus pengujian

dari model navigasi. Sementara semua pendekatan yang dibahas memberikan

jaminan teoritis konvergensi asimtotik ke nilai input yang diinginkan, mereka

menunjukkan kinerja waktu eksekusi yang buruk ketika diterapkan ke aplikasi web,

dibandingkan, misalnya, dengan aplikasi desktop standar Java. Penggunaan

aplikasi DIG (Diversity based Generation) dalam penelitian ini berfokus pada

testing DOM (Document Object Module) dengan 3 aspek: pendekatan grafik,

pendekatan semantic, dan pendekatan search based. Penelitian yang dilakukakn

menunjukkan DIG meningkatkan proses testing sebanyak 23,5% lebih cepat dari

cara normal(Biaggiola, Ricca, Stocco, & Tonella, 2019).

Penelitian Mesbah Ali yang berjudul “Software Analysis for the

Web: Achievements and prospects” menjelaskan bahwa perubahan baru dalam

evolusi web tidak hanya membawa keuntungan tetapi juga datang dengan

serangkaian tantangan baru karena sifatnya yang heterogen dan terdistribusi. Tiga

bahasa, yaitu JavaScript, CSS, dan HTML/DOM (Document Object Module)

berinteraksi di sisi klien secara internal, dan melalui jaringan melalui HTTP dengan

setidaknya satu bahasa lain di sisi server (misalnya, JavaScript, PHP, Ruby, Java,

dll). Apa yang dapat terlihat adalah aplikasi web yang dibuat dengan model dan

teknologi baru tidak didukung oleh alat yang ada (misal, web crawling), teknik

(misal, analisis dan pengujian web), dan lingkungan pengembangan (misal,

IDE/Integrated Development Enviroment) yang biasanya berkembang lebih lambat.

Hasil dari penelitian tersebut berupa pembuatan analisis dan testing yang baik

dengan mempertimbangkan proses pengembangan aplikasi dan proses testingnya

5
dengan analisis kode yang baik, menghindari smelly code, dan membantu

programmer dalam mengidentifikasi kesalahan ketiknya (Mesbah, 2016).

Pada penelitian yang dilakukan oleh Rika Rahmawati yang berjudul

“Sistem Pelaporan Kinerja Pegawai Berbasis Web Pada Kementerian Agama

Kabupaten Luwu Utara”, Pemaparan kinerja pegawai kantor Kementrian Agama

Kabupaten Luwu Utara didapati masih belum terotomasi. Laporan Kinerja Harian

(LKH) pemaparannya masih memakai perantara kertas tentu sehingga berdampak

secara tidak langsung terhadap penumpukan lembaran laporan kerja di kantor, dan

menjadi pangkal masalah penghamburan kertas. Hasil dari penelitiannya berupa

Sistem Pelaporan Kinerja Pegawai Berbasis Web Pada Kementrian Agama

Kabupaten Luwu Utara yang memangkas penggunaan kertas, dan mengurangi

penumpukan dokumen laporan kinerja pegawai di kantor (Rahmawati, 2018).

Begitu pula dengan penelitian yang dilakukan oleh Nur Hakiki yang

berjudul “Rancang Bangun Sistem Pelaporan Data Statistik Desa Pada Kecamatan

Pallangga Berbasis Web”, yang juga menghasilkan Sistem Informasi Pelaporan

Data Statistik Desa berbasis web pada Kecamatan Pallangga yang diharapkan dapat

membantu masalah lamanya waktu yang dibutuhkan untuk melakukan pencatatan

data kependudukan pada wilayah tersebut(Hakiki, 2018).

Berdasarkan beberapa penelitian tersebut, sistem pelaporan data atau

dokumen yang baik akan sangat berdampak pada kinerja suatu organisasi. Satpol

PP Kota Tangerang selatan merupakan instrumen Pemerintah Daerah Kota

Tangerang Selatan yang bertugas menegakkan Peraturan Daerah yang dibuat di

6
wilayah Kota Tangerang Selatan, beserta menindak lanjuti adanya pelanggaran

yang dilaporkan dari masyarakat. Sebagai instrumen Pemerintah Daerah yang

bertugas menegakkan Peraturan Daerah, Satpol PP Kota Tangerang Selatan sudah

memiliki media untuk berkomunikasi dengan masyarakat melalui pusat informasi

di Kantor Satpol PP Kota Tangerang Selatan atau melalui call center yang tersedia

di Kantor Satpol PP Kota Tangerang Selatan, namun fakta yang ditemui di lapangan

adalah seringkali call center ini sulit atau tidak bisa dihubungi pada waktu-waktu

tertentu sehingga dapat disimpulkan bahwa call center yang ada tidak tersedia

setiap saat. Pengelolaan laporan pelanggaran Peraturan Daerah pada Satpol PP Kota

Tangerang Selatan saat ini masih menggunakan filing kertas formulir laporan yang

akan diisi dengan laporan pelanggaran Peraturan Daerah yang masuk, kemudian

diarsipkan, dan dipindahkan ke Microsoft Excel untuk disimpan, dan formulir

dalam bentuk fisik (kertas) kemudian akan diteruskan kepada satuan yang bertugas

di daerah baik diteruskan secara fisik maupun secara informasi untuk dapat

dilakukan penindakan.

Namun untuk melakukan pelaporan seperti demikian jelas memakan

waktu. Banyak faktor yang membuat masyarakat berat untuk melakukan pelaporan

secara langsung, diantaranya apabila tempat tinggal mereka terlalu jauh dengan

tempat melapor, sehingga untuk melakukan pelaporan butuh waktu yang lama

hanya untuk mencapai tempat melapor. Kemudian faktor waktu juga sangat

berperan penting untuk penindakan, karena seringkali apabila penindakan

dilakukan terlambat banyak bukti yang sudah hilang, atau bahkan pelanggaran yang

7
terjadi bisa gagal ditindak sama sekali karena kabar akan terjadinya penindakan

sudah tercium.

Melihat keadaan tersebut, adanya sebuah sistem yang dapat

membantu mempersingkat waktu bagi masyarakat untuk melakukan laporan ke

Satpol PP akan sangat membantu. Apabila proses pelaporan dapat dilakukan secara

online, maka pelanggaran yang terjadi jelas dapat ditindak dengan lebih cepat.

Masyarakat pun tidak perlu repot-repot mendatangi tempat pelaporan secara

langsung, apalagi jika tempat tinggal mereka berjarak jauh dari tempat pelaporan.

Mengingat tujuan yang ingin dicapai adalah untuk memfasilitasi

masyarakat dalam melakukan pelaporan pelanggaran Peraturan Daerah kepada

Satpol PP kota Tangerang Selatan melalui keberadaaan sistem yang cepat dan dapat

diakses dimanapun. Karenanya, masyarakat membutuhkan sistem pelaporan web

memudahkan melaporkan pelanggaran Peraturan Daerah di lingkungannya kepada

Satpol PP kota Tangerang Selatan. Berlandaskan uraian permasalahan diatas,

penulis memutuskan untuk meneliti mengenai perancangan dan pembangunan

sistem pelaporan pelanggaran Peraturan Daerah di Satpol PP Kota Tangerang

Selatan dengan judul “Rancang Bangun Sistem Informasi Layanan Pengaduan

Peraturan Daerah (SILAPPERDA) Berbasis Web pada Satpol PP Kota

Tangerang Selatan”.

1.2 Identifikasi Masalah

Sesuai dengan latar belakang yang dipaparkan, penulis mendapati

adanya sejumlah masalah, yaitu:

8
 1. Masyarakat masih melakukan Pelaporan Pelanggaran Peraturan

Daerah dengan proses yang masih manual, sehingga masyarakat

perlu mendatangi tempat pelaporan secara langsung, dan

seringkali menyulitkan bagi masyarakat yang bertempat tinggal

jauh dari tempat pelaporan.

2. Seringkali masih terdapat pelanggaran yang tidak ditindak karena

sulitnya masyarakat mendatangi tempat pelaporan secara

langsung dan banyaknya waktu yang diperlukan untuk

melaporkan satu pelanggaran Pelaporan Daerah karena prosesnya

yang masih harus dilakukan secara langsung.

3. Masyarakat sulit melaporkan pelanggaran peraturan daerah

akibat nomor kontak Kantor Satpol PP Kota Tangerang Selatan

yang tidak selalu tersedia setiap saat

1.3 Rumusan Masalah

Selaras dengan identifikasi masalah yang dipaparkan di atas, masalah

yang dirumuskan dalam studi yang dilakukan diantaranya adalah:

1. Bagaimana mendesain dan mengembangkan Sistem Informasi

Layanan Pengaduan Pelanggaran Peraturan Daerah berbasis web?

2. Bagaimana merancang dan membangun aplikasi yang dapat

memudahkan anggota Satpol PP di lapangan dalam menerima

alur informasi dari masyarakat tentang pelanggaran Peraturan

Daerah?

1.4 Batasan Masalah

9
 Supaya penelitian yang penulis lakukan lebih terstruktur dan terarah,

penulis memberi batasan-batasan masalah beserta ruang lingkup penelitian sebagai

berikut:

1. Sistem informasi yang dikembangkan digunakan untuk

melaporkan pelanggaran Peraturan Daerah hanya dalam lingkup

wilayah kota Tangerang Selatan sesuai dengan ruang lingkup

kerja organisasi Satpol PP Kota Tangerang Selatan

2. Sistem memiliki ruang lingkup pembahasan yang meliputi proses

pelaporan pelanggaran peraturan daerah, proses tracking laporan,

dan proses manajemen data laporan.

3. Sistem informasi yang dibangun digunakan untuk mengelola dan

melaporkan pelanggaran peraturan daerah.

4. Pengembangan sistem memanfaatkan pendekatanRapid

Application Development (RAD) dan dibantu Unified Modelling

Language (UML) versi 2.5.1 sebagai alat pemodelan sistem.

5. Pembangunan Sistem Informasi Pelaporan Pelanggaran

Peraturan Daerah memanfaatkan bahasa pemrograman PHP versi

7.3 dilengkapiframework CodeIgniter.

6. Penulis menggunakan perangkat lunak pendukung yaitu

Microsoft Visio 2013 untuk membuat diagram UML dan

merancang desain interface.

1.5 Tujuan Penelitian

10
 Penelitian yang penulis lakukantujuannya terbagi dalam tujuan umum

dan tujuan khusus. Tujuan umum yang dicapai dengan diadakannya penelitian yaitu

membuat Sistem Informasi Layanan Pengaduan Pelanggaran Peraturan Daerah

berbasis web pada Satpol PP Kota Tangerang Selatan. Adapun tujuan khusus yang

ingin diraih peneliti dengan melakukan penelitian ini diantaranya adalah:

1. Mendesain dan mengembangkanSistem Informasi Layanan

Pengaduan Pelanggaran Peraturan Daerah yang dapat menunjang

aktivitas pelaporan pelanggaran Peraturan Daerah, pelacakan

laporan, pengelolaan laporan masuk, serta pengurangan

penggunaan kertas.

2. Mempermudah proses pelaporan pelanggaran Peraturan Daerah

dan pengelolaan laporan masuk dengan menawarkan sistem yang

dapat dilacak sehingga jalannya laporan dari dilaporkan hingga

selesai dapat dipantau.

3. Meminimalisir keterlambatan penanganan laporan akibat

lambatnya proses pelaporan secara langsung yang membantu

proses penindakan pelanggaran Peraturan Daerah di lapangan.

1.6 Manfaat Penelitian

1.6.1. Manfaat Bagi Penulis

1. Dapat mempergunakan pengetahuan yang didapat selama

perkuliahan terutama dalam merancang dan membangun sebuah

sistem informasi.

11
 2. Dapat memahami perancangan dan pembangunan sistem

informasi berbasis web secara mendalam dan memahami

metodologi pengembangan sistem secara lebih mendalam.

3. Teori yang diajarkan dalam perkuliahan dapat dibandingkan

dengan masalah dan keadaan yang sebenarnya di lapangan.

1.6.2. Bagi Instansi

1. Memudahkan perusahaan dalam proses pengelolaan dan

penindakan laporan pelanggaran Peraturan Daerah.

2. Masalah yang ada di dalam perusahaan dapat dihindari dengan

adanya sistem informasi layanan pengaduan pelanggaran Peraturan

Daerah, sehingga organisasi dapat menjalankan operasinalnya

dengan lebih baik lagi dan dapat memberikan kepuasan bagi

masyarakat.

3. Menyediakan informasi dengan lekas, jitu, dan cermat tentang

laporan yang diperlukan baik bagi masyarakat maupun bagi

anggota satuan.

1.7 Metodologi Penelitian

12
1.7.1 Metode Pengumpulan Data

Penulis memakai metode pengumpulan data dalam melakukan

penulisan penelitian ini. Adapun metode pengumpulan data yang peneliti

pergunakan adalah sebagai berikut:

1. Observasi

Penulis merangkum data dengan mengamati secara langsung

jalannya kegiatan pada Satpol PP Kota Tangerang Selatan untuk

mengetahui secara langsung bagaimana sistem yang ada berjalan.

2. Wawancara

Supaya dapat memperoleh gambaran, keterangan, dan penjelasan

yang digunakan untuk membantu proses perancangan dan

pembangunan sistem, penulis melakukan tanya jawab dengan staff

Satpol PP Kota Tangerang Selatan, warga sebagai pelapor, dan

dengan anggota satuan sebagai pihak yang melakukan penindakan

di lapangan.

3. Studi Pustaka

Studi pustaka dilakukan penulis sebagai upaya lanjutan untuk

menyempurnakan kurangnya data yang didapat dari wawancara

dan pengamatan langsung. Penulis mengumpulkan data dengan

mengutip sumber media cetak atau elektronik yang terkait dengan

masalah di dalam penelitian.

13
1.8 Metodologi Pengembangan Sistem

Penulis merancang sistem menggunakan metode pengembangan Rapid

Application Development (RAD) dengan pendekatan berorientasi objek.

1.8.1 Metode Pengembangan Sistem

Penulis menggunakan metode berorientasi objek dengan pendekatan

Rapid Aplication Development (RAD) dan alat perancangan sistem Unified

Modelling Language (UML). RAD merupakan satu pendekatan pengembangan

sistem berorientasi objek yang mencakup metode pengembangan serta softwarenya

(Kendall & Kendall, Analisis dan Perancangan Sistem, 2010). Tujuan utama RAD

adalah untuk memangkas waktu, yang umumnya perlu dilakukan selama

berlangsungnya siklus hidup pengembangan sistem konvensional dalam merancang

dan menerapkan sebuah sistem informasi. Adapun tahap-tahap pengembangan

aplikasi menggunakan metodologi Rapid Application Development (RAD) adalah

sebagai berikut (Kendall & Kendall, Analisis dan Perancangan Sistem, 2010):

a. Requirements Planning (Perencanaan Syarat-Syarat)

User dan analissaling bertatap muka dan mengidentifikasi tujuan

system serta mengidentifikasi syarat yang diperlukan untuk

menghasilkan tujuan yang sudah diidentifikasi tersebut. Tujuan

fase ini adalah untuk menyelesaikan masalah di dalam organisasi.

Walaupun sebagian dari sistem yang diajukan bisa diarahkan

menggunakan teknologi informasi dan sistem, upaya untuk

mencapai tujuan perusahaan akan tetap jadi fokus utama.

b. RAD Design Workshop (Workshop Desain RAD)

14
 Fase ini merupakan fase perancangan dan perbaikan, fase ini bisa

digambarkan sebagai workshop. Analis dan programmer dapat

menyelesaikan pembangunan sistem dan menggambarkan

rancangan beserta pola kerja sistem kepada pengguna.

Tergantung ukuran aplikasi yang dikembangkan, workshop

desain mungkin memakan waktu beberapa hari. Pada tahap ini,

tanggapan pengguna terhadap prototype diukur dan dianalisa

untuk memperbaiki modul-modul yang dirancang. Menurut

Kendall, pengembangan dapat didorong sampai pada tingkat

yang sangat cepat melalui usaha kreatif ini apabila seorang

pengembang atau pengguna sistem tersebut sudah

berpengalaman. (Kendall & Kendall, Analisis dan Perancangan

Sistem, 2010)

c. Implementation (Implementasi)

Analis dan pengguna bekerja sama dengan telaten selama

kegiatan workshop untuk merancang aspek bisnis perusahaan

yang tidak bersifat teknis pada fase ini. Menurut Kendall (2010),

ujicoba dilakukan terhadap sistem atau bagian sistem baru,

kemudian segera setelah hasil ujicoba sistem disetujui, sistem

akan dibangun dan disaring, setelah itu sistem tersebut akan

disosialisasikan kepada organisasi.

15
 Gambar 1. 1 Siklus Rapid Application Development (Kendall, 2010)

1.9 Sistematika Penulisan

BAB I: Pendahuluan

Bab ini berisi pendahuluan yang merupakanpenjelasan mengenai latar

belakang penelitian, rumusan masalah, tujuan dan kegunaan dari

penelitian, serta sistematika penulisan.

BAB II: Tinjauan Pustaka

Bab ini berisi tinjauan pustaka dimana teori-teori yang diperoleh melalui

studi pustaka dari berbagai literatur yang berkaitan dengan masalah

penelitian dipaparkan. Pemaparan ini selanjutnya digunakan dalam

landasan pembahasan dan pemecahan masalah.

BAB III: Metode Penelitian

Bab ini berisi variabel penelitian dan definisi operasional, metode

pengembangan aplikasi, serta sistematika rancangan aplikasi.

16
BAB IV: Hasil dan Pembahasan

Bab ini berisi deskripsi rancangan Aplikasi Sistem Informasi Layanan

Pengaduan Pelanggaran Peraturan Daerah. Pada bab ini akan dijabarkan

rancangan aplikasi dari rancangan-rancangan dasar seperti flowchart

penggunaan aplikasi hingga rancangan interface aplikasi.

BAB V: Penutup

Pada bab ini dipaparkan kesimpulan-kesimpulan yang didapat dari

masalah yang sedang diteliti, serta saran – saran kepada pihak Satpol PP

Kota Tangerang Selatan untuk membantu penyempurnaan

pengembangan Aplikasi Sistem Informasi Layanan Pengaduan

Pelanggaran Daerah berdasarkan penerapan teori yang digunakan.

17
18
 BAB II

LANDASAN TEORI

2.1. Definisi Rancang Bangun

Perancangan merupakan kumpulan operasi yang menguraikan sebuah

sistem untuk diterjemahkan menjadi bahasa pemrograman supayabagaimana

implementasi komponen-komponen dalam sistem dapat dideskripsikan dengan

rinci (Pressman, 2002). Sedangkan kegiatan pembangunan sistem dapat

didefinisikan sebagai sebuah kegiatan untuk membuat sistem baru untuk

memperbarui sistem baik secara penuh maupun secara parsial (Pressman, 2002).

Dengan demikian dapat disimpulkan bahwa rancang bangun adalah

kumpulan prosedur yang menguraikan sebuah sistem untuk diterjemahkan ke dalam

bahasa pemrograman supaya bagaimana implementasi komponen-komponen

dalam sistem dapat dideskripsikan dengan rinci, dengan tujuan membuat sistem

baru untuk memperbarui sistem secara penuh maupun secara parsial.

2.2. Konsep Dasar Sistem

2.2.1 Definisi Sistem

Sistem adalah sekumpulan elemen-elemen, komponen-komponen, atau

nilai-nilai pengubah yang teratur, saling berhubungan, saling ketergantungan, serta

terstruktur. (Sutabri, 2012)

19
 Umumnya, sistem dijabarkan menjadi suatu keutuhan yang merupakan

gabungan bagian-bagian yang berkaitan sehingga mempermudah aliran informasi,

materi, atau energi dalam menjangkau sasarannya.

2.2.2 Karakteristik Sistem

Pada dasarnya, suatu sistem yang sederhana cukup terdiri dari input,

proses, dan output. Namun, untuk dapat dikatakan sebagai sebuah sistem yang

layak, sistem dapat memiliki sifat-sifat seperti berikut (Hutahean, 2015):

1. Komponen

Kumpulan komponen yang saling mempengaruhi akan mewujudkan

suatu sistem, artinya kerja sama di antara komponen-komponen

tersebut membentuk suatu kesatuan. Komponen sistem dapat berupa

sub sistem atau bagian-bagian dari suatu sistem.

2. Batasan Sistem (Boundary)

Batasan sistem ialah wilayah pembagi suatu sistem dengan sistem

lainnya. Suatu sistem dapat dipandang menjadi satu berkat adanya

batasan sistem. Scope suatu sistem juga dapat digambarkan dari

batasan sistemnya.

3. Lingkungan Luar Sistem (Environment)

Environment yaitu daerah yang terpisahkan batas sistem,jadi tidak

berpengaruh terhadap aktifitas sistem. Ada lingkungan luar sistem

yang bermanfaat bagi sistem, namun ada juga lingkungan luar sistem

yang membebani sistem.

20
4. Penghubung Sistem (Interface)

Yang dimaksud dengan interface adalah perantara yang

menjembatanisatu subsistem dengan subsistem lainnya. Sumber

daya dapat dialirkan dari satu subsistem ke subsistem lain dengan

adanya interface. Keluaran (output) dari subsistem juga dapat diubah

oleh interface menjadi masukan (input)untuk subsistem lain.

5. Masukkan Sistem (Input)

Energi yang diterima masuk ke dalam sistem disebut juga masukan

(input), bisa berupapelestarian (maintenance input), atau signal

input. Maintenance input ialah energi ditangkap sistem untuk

mempertahankan kelangsungan kerjanya. Sedangkan energi yang

nantinya diolah menjadi keluaran (output) merupakan signal input.

6. Keluaran Sistem (Output)

Energi hasil olahan energi masukan sistem (input) adalah keluaran

sistem (output). Keluaran sistem (output) selanjutnya dapat

digolongkan menjadi yang bermanfaat dan buangan yang kurang

bermanfaat.

7. Pengolah Sistem

Pengolah sistem ialah bagian dalam sistem yang mengolah input

membentuk hasil yang diharapkan dalam sistem yaitu output.

8. Sasaran Sistem

21
 Sudah pasti suatu sistem ada sasarannya mengapa sistem tersebut

dibuat. Tujuan suatu sistem akan sangat mendefinisikan apa saja

masukan (input) dari suatu sistem serta apa saja keluaran (output)

sistem tersebut.

Gambar 2. 1 Karakteristik Sistem (Hutahean, 2015)

2.2.3 Klasifikasi sistem

Berdasarkan sudut pandangnya, sistem dapat digolongkan sebagai

berikut (Hutahean, 2015):

1. Sistem Fisik (Physical System) dan Sistem Abstrak (Abstract

System)

Sistem yang tidak terlihat secara fisik dan berupa gagasan atau ide-

ide. Sedangkan sistem fisik adalah sistem yang tampak secara fisik.

2. Sistem Buatan Manusia (Human Made System) dan Sistem Alamiah

(Natural System)

22
 Sistem alamiah yaitu sistem dimana prosesnya alami dan bukan

produk tangan manusia, contohnya sistem perputaran bumi.

Sedangkan sistem buatan adalah sistem yang di terdapat terdapat

hubungan antara manusia dengan mesin, misalnya sistem informasi.

3. Sistem Probabilistik (Probabilistic System) dan Sistem

Deterministik (Deterministic System)

Sistem deterministik merupakan sistem yang cara kerjanya dapat

diduga. Interaksi bagian-bagiannya, maupun outputnya dapat

diperkirakan, contohnya komputer. Sedangkan sistem probabilistik

merupakan sistem yang mustahil diduga jalannya di masa depan

karena mengandung unsur peluang, misalnya sistem masyarakat.

4. Sistem Tertutup (Closed System) dan Sistem Terbuka (Open System)

Sistem terbuka masih terhubung dan menangkap input dari

lingkungan luarnya dan menghasilkan output bagi subsistem

lainnya. Adapun sistem tertutup tidak terpengaruh dan tidak

memiliki hubungan dengan lingkungan luarnya.

2.3. Konsep Dasar Informasi

2.3.1 Definisi Informasi

Informasi merupakan data yang digolongkan, diolah atau ditafsirkan

supaya dapat digunakan untuk mengambil keputusan (Sutabri, 2012). Data yang

telah diolah atau yang sudah memiliki manfaat adalah sebuah informasi. Informasi

bisa dikatakan merupakan data yang telah melalui pengolahan dengan

23
menggunakan metode tertentu. Dengan menggunakan informasi, penggunanya

dapat meningkatkan wawasannya.

2.3.2 Siklus Informasi

Mengolah data menggunakan model proses tertentu akan menghasilkan

sebuah informasi (Sutabri, 2012). Setelah data diolah menggunakan model tertentu

dan menjadi informasi, informasi tersebut lalu diterima oleh penerima informasi,

lalu digunakan oleh penerima informasi dalam membuat keputusan dan mengambil

tindakan, setelah tindakan diambil, tindakan yang dilakukan akan melahirkan

tindakan lain yang ke depannya menghasilkan data lagi. Data yang dihasilkan

nantinya akandigunakan lagi menjadi input, diproses lagi menggunakan suatu

model, dan akhirnya menjadi informasi, dan berulang terus, akhirnya terwujudlah

siklus. Siklus inilah yang dikenal sebagai siklus informasi atau siklus pengolahan

data. Siklus informasi digambarkan seperti berikut:

Gambar 2. 2 Siklus Informasi (Sutabri, 2012)

2.3.3 Nilai Informasi

Nilai sebuah informasi bergantung kepada dua elemen, yaitu keuntungan

yang didapat dari informasi tersebut dan besar biaya yang dihabiskanuntuk

24
memperolehnya (Sutabri, 2012). Apabila manfaat yang didapat dari memperoleh

sebuah informasi lebih banyak dibandingkan biaya yang habis dalam memperoleh

informasi tersebut, maka informasi tersebut dapat dikatakan memiliki suatu nilai.

Meskipun begitu, perlu diperhatikan bahwa dalam suatu sistem informasi, suatu

informasi biasanya memiliki sejumlah manfaat, karenanya antara informasi yang

diperoleh dan biaya yang dihabiskan untuk mengakuisisinya sukar dikorelasikan,

karena pihak yang menggunakan informasi di dalam sebuah organisasi tidak hanya

satu. Kebanyakan informasi sulit ditakar manfaatnya dengan uang. Meskipun

begitu, nilai keuntungan dari informasi yang diperoleh masih bisa ditaksir dari nilai

efektifitasnya. Dalam menganalisis nilai informasi, umumnya akan ada kaitannya

dengan cost benefit atau cost effectivess. Nilai informasi berdasarkan pada 10

karakteristik berikut:

1. Mudah Diperoleh

Seberapa mudah dan cepatnya informasi diperoleh diperlihatkan

oleh sifat ini. Untuk nilai kecepatannya bisa dihitung dengan jelas,

misalnya 1 jam versus 48 jam. Meskipun begitu,seberapa bernilai

informasi tersebut bagi pemakainya akan sulit ditaksir.

2. Luas dan Lengkap

Lengkap atau tidaknya isi informasi yang ditunjukkan oleh sifat ini

tidak tergantung hanya dari volumenya, namun juga diukur dari

keluaran (output) dari informasi tersebut. Sifat sulit dihitung karena

sifatnya yang sangat kabur.

25
3. Ketelitian

Ketelitian informasi berkaitan erat dengan derajat kebabasan dari

kesalahan pada keluaran (output) informasi. Dalam data bervolume

luas kesalahan yang umum ada terbagi menjadi dua, yaitu salah

perhitungan dan salah pencatatan.

4. Kecocokan

Sifat ini mengukur besarnya manfaat output dari informasi terkait

dengan harapan pemakai informasi. Informasi yang dihasilkan wajib

berkaitan dengan masalah yang dihadapi oleh pemakai informasi.

5. Ketepatan Waktu

Sifat ini erat kaitannya dengan lama waktu tempuh dalam

menyampaikan informasi, yang seharusnya lebih singkat dari waktu

yang dibutuhkan dalam siklus untuk memperoleh informasi. Mulai

dari menangkap masukan input, melakukan processing, hingga

melaporkan output kepada para pemakai informasi harus dilakukan

tepat waktu. Dalam beberapa situasi, sangat mungkin untuk

mengukur ketepatan waktu.

6. Kejelasan

Informasi harusnya bebas dari sebutan-sebutan yang tidak spesifik

dan tidak dimengerti oleh penerima informasi.

7. Keluwesan

Sifat ini tidak hanya berkaitan dengan kemampuan suatu informasi

untuk digunakan dalam membuat tidak hanya satu keputusan,

26
 namun juga berkaitan dengan kemampuan informasi tersebut untuk

digunakan oleh lebih dari satu orang pengambil keputusan. Sifat ini

sulit diukur, tapi dalam beberapa situasi, sifat ini dapat

ditaksirmenggunakan takaran tertentu.

8. Dapat Dibuktikan

Sifat ini berkaitan dengan sejauh mana sebuah informasi dapat diuji

oleh banyak pemakai informasi hingga sebuah kesimpulan yang

sama bisa diraih.

9. Tidak Ada Prasangka

Sifat ini berhubungan dengan mendesak atau tidaknyauntuk sebuah

informasi diubah untuk mencapai kesimpulan yang sebelumnya

sudah diarahkan.

10. Dapat Diukur

Sifat ini menunjukan esensi informasi yang dihasilkan oleh sistem

informasi formal. Meskipun kabar angin, desas-desus, dugaan-

dugaan, dan klenik yang beredar di masyarakat sering dinilaijuga

sebagai informasi, namun menjadi tidak relevan karena berada di

luar lingkup pembahasan.

2.3.4 Kualitas Informasi

Seberapa berkualitas informasi bergantung pada 3 hal. Adapun yang

mempengaruhi kualitas informasi diantaranya, keakuratan informasi (accurate),

ketepatan waktunya (timelines) dan keterkaitan dengan masalah (relevance)

(Sutabri, 2012).

27
1. Akurat (Accurate)

Hal yang harus diperhatikan dalam melihat sebuah informasi adalah

tidak ada kesalahan fakta atau kecondongan pendapat yang

terkandung dalam informasi tersebut. Informasi yang akurat yaitu

informasi yang menjelaskan maksudnya dengan jelas. Dalam

penyampaiannya dari sumber informasi menuju penerima informasi,

informasi dapat berubah atau rusak akibat terjadi gangguan (noise),

sehingga keakuratan sebuah informasi menjadi sebuah keharusan.

2. Tepat Waktu (Timelines)

Informasi harus sampai ke penerima informasi tepat waktu karena

bila informasi tidak mutakhir, maka tidak bernilai lagi. Informasi

adalah acuan pengambilan keputusan. Dalam sebuah organisasi, bisa

fatal akibatnya bila pengambilan keputusan dilakukan terlambat.

Pada saat ini, informasi mahal nilainya, oleh karena itu informasi

harus cepat didapat dan cepat dikirim sehingga perlu teknologi untuk

memperoleh, memroses, dan mendistribusikannya.

3. Relevan (Relevance)

Harus ada manfaat yang diperoleh penerima ketika memperoleh

informasi, tetapi bagi setiap orang, relevansi sebuah informasi

berbeda-beda. Misalnya, tentu akan kurang relevan jika

menyampaikan informasi mengenai rusaknya mesin cetak kepada

resepsionis. Sebaliknya, informasi tersebut akan lebih relevan jika

disampaikan kepada teknisi perusahaan.

28
2.4. Konsep Dasar Sistem Informasi

2.4.1. Definisi Sistem Informasi

Beberapa ahli mengungkapkan pendapatnya akan Sistem Informasi:

1. Sistem informasi merupakan kumpulan dari komponen-komponen

yang mengumpulkan, memproses, menyimpan, dan menyediakan

output dari setiap informasi yang dibutuhkan dalam proses bisnis

serta aplikasi yang digunakan melalui perangkat lunak, database

dan bahkan proses manual yang terkait(Satzinger, Jackson, &

Burd, 2011).

2. Sistem Informasi adalah suatu sekumpulan elemen atau komponen

berupa orang, prosedur, database dan alat yang saling terkait untuk

memproses, menyimpan serta menghasilkan informasi untuk

mencapai suatu tujuan (goal) (Stair & Reynolds, 2012).

3. Sistem Informasi adalah sistem yang di buat secara umum

berdasarkan seperangkat komputer dan komponen manual yang

dapat dikumpulkan, disimpan dan diolah untuk menyediakan output

kepada user (Gelinas & Dull, 2012).

Sehingga dapat diambil kesimpulan bahwa sistem informasi merupakan

kumpulan dari komponen-komponen berupa orang, prosedur, database dan alat

yang saling terkait untuk memproses, menyimpan serta menghasilkan informasi

untuk mencapai suatu tujuan (goal), di buat secara umum berdasarkan seperangkat

komputer dan komponen manual yang dapat dikumpulkan, disimpan dan diolah,dan

29
menyediakan output dari setiap informasi yang dibutuhkan dalam proses bisnis. Di

dalamnya berlangsung sebuah proses mengolah data menjadi informasi.

2.4.2. Komponen Sistem Informasi

Penyusun sistem informasi, dikenal juga dengan blok bangunan (building

block), dibagi jadi enam blok, yaitu (Jogiyanto, 2005):

a. Blok Masukan (Input Block)

Blok input terdiri dari kumpulan data yang ditangkap dalam system

informasi. Blok input bisa bermuatan berbagai dokumen primer.

b. Blok Model (Model Block)

Blok model tersusun atas tahapan-tahapan, logika-logika, serta

model matematika yang digunakan sistem untuk mengolah input

menjadi suatu informasi.

c. Blok Keluaran (Output Block)

Blok ini dibentuk dari informasi yang diolah dari masukan (input)

dari sistem. Informasi yang dihasilkan nantinya akan membentuk

kumpulan data yang akan diarsipkan menjadi laporan.

d. Blok Teknologi (Technologi Block)

Berdirinya sebuah sistem informasi utamanya ditunjang oleh blok

teknologi. Blok ini terdiri dari beberapa komponen diantaranya, alat

masukan data (input device), alat simpan dan akses data (storage

30
 device), alat untuk mengirim keluaran (output device) dan alat untuk

menjaga sistem (control device). Sedangkan bagian utama teknologi

informasi terdiri dari 3 unsur yaitu, humanware/brainware,

software, dan hardware.

e. Blok Basis Data (Database Block)

Database menyimpan sekumpulan data yang saling terhubung satu

sama lainnya. Database tersimpan di dalam perangkat keras

(hardware), biasanya di dalam komputer,dan untuk mengubah

isinya memanfaatkan perangkat lunak (software). Data perlu

dicadangkan dan diatur sedemikian rupa di dalam (database) supaya

sistem bisa memproduksi informasi bermutu.

f. Blok Kendali (Control Block)

Beberapa bentuk pengendalian perlu dirancang dan diterapkan untuk

mencegah terjadinya hal-hal yang dapat merusak sistem akibat

kesalahan atau kerusakan dalam penggunaan system di masa depan.

2.5. Konsep Dasar Laporan

2.5.1. DefinisiLaporan

Laporan artinya hal yang dilaporkan, termasuk berita (Wahono, 2007).

Laporan umumnya mengacu kepada uraian atau rekaman menyeluruh mengenai

hasil pengamatan di lapangan atau menceritakan suatu pengalaman langsung.

Laporan dibagi menjadi dua jenis berdasarkan cara penyampaiannya,

yaitu laporan yang disampaikan secara lisan dan tertulis. Laporan yang disampaikan

secara lisan contohnya, melalui radio, televisi, dan alat audio visual lainnya.

31
Sedangkan contoh laporan yang disampaikan secara tertulis diantaranya dalam

bentuk makalah, jurnal, dan sebagainya.

Dalam menyusun sebuah kebijakan, laporan merupakan unsur yang

sangat penting. Pimpinan organisasi kerap kali tidak dapat mengurus hal-hal yang

terjadi pada bawahan organisasi yang dia pimpin secara rinci karena luasnya

lingkup organisasi yang dipimpinnya. Namun, pimpinan atas dapat mengetahui

secara langsung keadaan sehari-hari unit bawahannya dengan memanfaatkan

adanya laporan. Pemimpin organisasi dapat mengambil keputusan dengan cepat

dengan memanfaatkan informasi yang disampaikan melalui laporan.

2.6. Konsep Dasar Peraturan Daerah

Undang-Undang Dasar Negara Kesatuan Republik Indonesia Tahun

1945 Pasal 18 ayat (1) menerangkan, Republik Indonesia dipisahkan menjadi

daerah-daerah provinsi, yang didalamnya dipisah lagi menjadi kabupaten dan kota.

Terdapat Pemerintah Daerah, yang mengelola setiap provinsi, kabupaten atau kota

yang dibawahinya dengan Undang-Undang Pemerintahan Daerah. Pemerintah

Pusat memberi mandatke Pemerintah Daerah berupa kebebasan dalam mengurus

wilayahnya dalam bentuk Peraturan Daerah. Dalam penyelenggaraannya,

Pemerintah Daerah membutuhkan Peraturan Daerah untuk mengendalikan jalannya

pemerintahan di daerah yang dibawahinya. Seperti yang dijelaskan dalam Undang-

Undang No. 23 Tahun 2014 tentang Pemerintahan Daerah, Peraturan Daerah

bealaskan pada Undang-Undang yang dirancang melalui kerjasama Dewan

Perwakilan Rakyat Daerah bersama Kepala Daerah Provinsi atau Kabupaten/Kota.

32
 Namun, sebagai sarana kontrol untuk Peraturan Daerah yang diberikan

kepada masing-masing Pemerintahan daerah, dibentuklah Satpol PP. Satpol PP

bertugas melakukan penindakan yang bersifat fisik berupa terkait penertiban

pelaksanaan peraturan daerah di lapangan. Selain tugas diatas, Satpol PP juga

bertugas sebagai pembina, penyuluh dan penyemangat masyarakat supaya dapat

secara sadar ikut turut bagian dan bertanggung jawab secara sukarela untuk selalu

taat terhadap peraturan daerah yang berlaku sesuai dengan ketentuan yang ada.

Polisi Pamong Praja adalah suatu satuan anggota yang merupakan aparat

pemerintah daerah dalam menegakkan Peraturan Daerah dan menyelenggarakan

ketertiban umum dan menjaga ketenteraman masyarakat, seperti yang dijelaskan

dalam Pasal 1 Angka 9 Peraturan Pemerintah Nomor 6 Tahun 2010 terkait Satuan

Polisi Pamong Praja. Pasal 148 ayat (1) Undang-Undang Nomor 32 Tahun 2004

tentang Pemerintahan Daerah juga menjelaskan bahwa Polisi Pamong Praja

merupakan instrumen daerah yang tugasnya menyokong tugas kepala daerah

menjaga ketentraman dan memelihara ketertiban umum serta menyelenggarakan

peraturan daerah.

Polisi Pamong Praja memiliki cakupan kewajiban dan kegunaan dalam

menjaga ketentraman serta mewujudkan ketertiban umum. Cakupan kewajiban dan

kegunaan ini intinya cukup lebar, karenanya aparat diharuskan siap dari segi

kuantitas, maupun kualitas individu,mencakup keharusan untuk bertugas secara

jujur. Polisi Pamong Praja sebagai institusi pemerintahan sipil harus tampak sebagai

pengayom masyarakat yang sanggup menghimpun dan menambah keikutsertaan

aktif masyarakat menjaga ketentraman dan mewujudkan ketertiban.

33
2.7. Konsep Dasar Pelanggaran Peraturan Daerah

Sesuai dengan Undang-Undang Republik Indonesia nomor 23 Tahun

2014 tentang Pemerintahan Daerah, Peraturan Daerah yang selanjutnya disebut

Perda atau yang disebut dengan nama lain adalah Perda Provinsi dan Perda

Kabupaten/Kota. Partisipasi Masyarakat adalah peran serta warga masyarakat

untuk menyalurkan aspirasi, pemikiran, dan kepentingannya dalam

penyelenggaraan Pemerintahan Daerah.

Perda yang dibentuk dengan sanksi pidana di dalamnya, sesungguhnya

merupakan faktor pencegah di dalam negara hukum yang demokratis agar warga

masyarakat dapat memahami bahwa apabila melanggar Perda sekalipun, dapat

terjerat sanksi pidana. Sanksi pidana dalam Perda merupakan sanksi yang ringan,

dan secara implisit hakim dapat bahkan wajib memilih bentuk sanksi yang adil bagi

masyarakat yang terlibat. Dalam korelasinya dengan tujuan pemberian sanksi

pidana dalam perkembangannya, pemberian sanksi pidana adalah untuk

memperbaiki kerusakan individu dan sosial yang ditimbulkan dari tindak pidana

yang dilakukan (Muladi, 2006).

Penetapan sanksi pidana dalam Perda, secara mendasar sangat

dimungkinkan, dan mengacu pada peraturan perundang-undangan tentang

pemerintahan daerah. Terakhir, juga dimungkinkan menurut Undang-Undang

Nomor 23 Tahun 2014. Sebelum dibentuknya Undang-Undang Nomor 23 Tahun

2014 tersebut, yaitu Undang-Undang Nomor 22 Tahun 1999, dan Undang-

Undang Nomor 32 Tahun 2004, Perda yang didalamnya terdapat sanksi pidana

biasanya menyangkut Perda Tentang Kebersihan, Perda Tentang Kebersihan

34
Umum, Perda Tentang Ijin Mendirikan bangunan, dan terkadang Perda yang Berisi

pungutan (pajak).

Penerapan atau implementasi Perda yang berupa pungutan, misalnya

PBB, Pajak kendaraan Bermotor, Perizinan, dan Parkir, dapat dilakukan sesuai

yang direncanakan. Masyarakat umumnya sadar akan kewajibannya dalam

membayar pajak. Begitu juga aparat pemerintah yang bekerjasama dengan pihak

bank, selalu siap melayani masyarakat yang siap melakukan pembayaran apabila

sudah sesuai dengan persyaratan.

2.8. Rapid Application Development (RAD)

Martin menjelaskan bahwa Rapid Application Development (RAD)

merupakan sebuah model tahapan pengembangan perangkat lunak yang

karakteristiknya urut dan selaras yang mementingkan untuk melakukan siklus

pengembangan yang cepat memanfaatkan pendekatan konstruksi berbasis

komponen (Pressman, 2002). Dengan menggunakan metode ini,untuk

menyelesaikan suatu sistem yang utuh hanya memerlukan tempo sekitar 60-90 hari

apabila kebutuhan untuk membangun sistem sudah dipahami dengan baik. RAD

dipecah menjadi empat fase, menurut Martin dalam (Kendall & Kendall, 2003),

yaitu:

1. Fase Requirements Planning

Fungsi apa saja yang menjadi fitur diputuskan oleh pengguna tingkat

tinggi dalam fase ini.

2. Fase Design Workshop

35
 User menelaah berbagai dimensi rancangan sistem yang bersifat

non-teknis dengan bimbingan dari penganalis pada fase ini. Akibat

karakteristiknya yang sangat interaktif, fase ini sering dicampur

dengan fase konstruksi pada workshop rancangan RAD.

3. Fase Konstruksi

Pengkodean sistem dilakukan berdasarkan rancangan-rancangan

sistem yang dibuat dalam fase sebelumnya. Setelah selesai

melakukan pengkodean, sistem lalu akan diuji kemampuannya

untuk memperoleh pendapat dan masukan dari user tingkat atas.

4. Fase Pelaksanaan

Dalam tahap terakhir ini sistem baru diujicoba, lalu dikenalkan

kepada para pengguna.

Gambar 2. 3 Fase RAD Martin (Kendall & Kendall, 2003)

Butler berpendapat bahwa RAD pun memiliki kekurangan seperti model-

model proses yang lainnya (Pressman, 2002):

1. RAD memerlukan sumber daya manusia dalam jumlah yang besar

dalam proyek yang berskala besar untuk meciptakan tim RAD yang

layak.

36
 2. Pengembang dan pengguna dituntut untuk bertanggung jawab di

dalam rangkaian aktifitas yang beruntun yang perlu dilakukan untuk

membangun sistem utuh dalam waktu yang singkat. Jika salah satu

pihak kurang berkomitmen dalam menjalankan rangkaian aktifitas

tersebut, maka proyek RAD akan gagal

Gambar 2. 4 Workshop Desain RAD (Kendall & Kendall, 2003)

2.9. Unified Modeling Language (UML)

Pemodelan merupakan tahapan mendesain software sedemikian rupa

sebelum dilakukannya coding. Kita dapat menganalogikan pemodelan perangkat

lunak seperti membuat rancangan atau cetak biru (blueprint) sebelum pembangunan

gedung dilakukan. Saat ini, scope peranti lunak semakin luas dan oleh karena itu

pembuatannya tidak bisa lagi asal-asalan. Semakin kompleks sebuah sistem, maka

sistem tersebut akan semakin sulit pula untuk dipahami. Sehingga penting untuk

menggunakan teknik pemodelan yang baik dalam merancang sistem yang

kompleks.

Unified Modeling Language (UML) adalah salah satu format notasi atau

istilah yang para profesional sama-sama gunakan di bidang software dalam

37
 merancang atau membuat model sebuah sistem software (Sugiarti, 2018). Dalam

pembuatan sebuah sistem yang berorientasi objek, UML menjadi sebuah alat bantu

yang dapat diandalkan karena UML meyuguhkan pemodelan visual yang mampu

membuat pengembang merancang purwarupa visinya secara baku. Pemodelan

menggunakan UML pada dasarnya berorientasi objek dan berbasis visual. Dengan

semakin mantap dan tenarnya teknologi programming, desain, dan analisa

berorientasi object, UML menjadi bahasa standar yang resmi.

2.9.1. Use-Case Diagram

Diagram use case adalah sebuah bentuk model yang melukiskan

kelakuan (behavior) dari sistem informasi yang dikembangkan (Sugiarti, 2018).

Diagram use case menjabarkan hubungan antara satu aktor atau lebih dengan sistem

yang dibuat. Lebih sederhana lagi, untuk menemukan fungsi-fungsi yang ada

didalam sistem beserta siapa saja yang berhak atas fungsi-fungsi tersebut dapat

dilihat dengan menggunakan diagram use case.

Sebuah Usecase harus menjabarkan sebuah pekerjaan yang memberikan

manfaat bagi aktor yang melakukannya. Oleh karena itu, sebuah usecase tidak akan

menjadi terlalu kecil nilainya, karena apabila demikian usecase tersebut tidak akan

memberikan nilai bagi aktor. Usecase pun harus dideskripsikan menggunakan kata

kerja, menjelaskan tujuan usecase, menjelaskan nilai yang akan didapat oleh aktor,

serta menjelaskan alur alternatifnya. Simbol yang digunakan dalam use case antara

lain:

Tabel 2. 1 Simbol-Simbol Use case Diagram (Sugiarti, 2018)

No. Simbol Nama Deskripsi

38
 orang, tahapan, atau

sistem lain yang

berhubungan dengan
Aktor
1 sistem informasi yang

dibangun di luar sistem

informasi yang

dibangun itu sendiri;

Merupakan fungsi yang

disediakan sistem

sebagai unit-unit yang

saling bertukar pesan

Usecase
2 antar unit atau antar

aktor; usecase umumnya

dispesifikasikan

menggunakan kata kerja

di awal frasa namanya.

Hubungan antara aktor

dan Usecase yang sudah

Asosiasi/association turut serta dalam

3
Usecase atau Usecase

yang berhubungan

dengan aktor

39
 Relasi Usecase

tambahan ke sebuah

Usecase yang
Extend
4 ditambahkan dapat

berdiri sendiri meskipun

tanpa adanya Usecase

tambahan tersebut;

Hubungan Usecase

tambahan ke sebuah

Usecase, dimana
Include
5 Usecase yang ditambah

perlu adanya Usecase

ini untuk dapat

menjalankan fungsinya

2.9.2. Activity Diagram

Diagram aktifitas adalah diagram yang memberikan gambaranarus

kerjaatau aktifitas dalam sistem atau business process(Sugiarti, 2018). Yang harus

dicermati dalam menggambar diagram aktifitas adalah, tidak menggambarkan

aktifitas yang dilakukan oleh actor, melainkan menggambarkan aktifitas sistem.

Diagram aktifitas memungkinkan untuk mendukung perilaku paralel. Activity

Diagram menggambarkan aliran-aliran activity di dalam sistem, diantaranya

menjelaskan bagaimana aliran-aliran activity di dalam sistem berawal, decision

40
yang mungkin terjadi dalam aliran-aliran activity tersebut, dan bagaimana aliran-

aliran tersebut berakhir.

Diagram aktifitas adalah diagram keadaan khusus yang state-state di

dalamnya banyak berupa aksi dan banyak perpindahan state di dalam activity

diagram disebabkan oleh rampungnya state sebelumnya (internal processing).

Karenanya, behaviour internal dari suatu sistem dan interaksi antar subsistem tidak

digambarkan oleh activity diagram secara persis, tetapi activity diagram lebih

menggambarkan secara umum proses-proses dan aliran activity dari tingkatan

puncak. Adapun dalam menggambar activity diagram menggunakan simbol-simbol

seperti dalam tabel di bawah ini:

Tabel 2. 2 Simbol-simbol Activity Diagram (Sugiarti, 2018)

No. Simbol Nama Deskripsi

Status awal aktivitas sistem, yang

1 Status awal merupakan awal dari activity

diagram.

Aktivitas yang dilakukan system

2 Aktivitas dan umumnya dimulai dengan kata

kerja.

Asosiasi percabangan jika ada

3 Decision pilihan aktivitas lebih dari satu.

41
 Asosiasi penggabungan dimana

4 Join lebih dari satu aktivitas disatukan

menjadi satu.

Status akhir aktifitas sistem, yang

5 Status akhir merupakan akhir dari activity

diagram.

Pemisah yang menggambarkan

organisasi bisnis yang

menanggung aktivitas yang

6 Swimlane
berlangsung.

2.9.3. Sequence Diagram

Sequence diagram atau diagram sekuens adalah diagram yang

menjelaskan tindak laku (behaviour) objek pada use case dengan mendefinisikan

jangka hidup objek tersebut beserta pesan yang dikirim dan diambil antar objek

(Sugiarti, 2018). Karenanya sebelum menggambar diagram sekuens, pembuat harus

menemukan objek-objek yang ikut sertapada sebuah usecase berikut metode-

metode yang dikandung class yang dijadikan percontohan objek tersebut.

Banyak diagram sekuens yang harus digambar sama jumlahnya dengan

banyaknya use case yang mempunyai proses pribadinya yang didefinisikan atau

seluruh use case yang sudah dipaparkan interaksinya atau aliran pesan. Sehingga

42
diagram sekuens yang harus dibuat juga lebih banyak juga jika analis

mendefinisikan semakin banyak use case. Dalam menggambar diagram sekuens,

menggunakan simbol-simbol berikut:

Tabel 2. 3 Simbol-simbol Sequence Diagram (Sugiarti, 2018)

No. Simbol Nama Deskripsi

Objek entity, yang merupakan

1 Lifeline interface yang saling

berinteraksi.

Rincian komunikasi antar objek,

berisi informasi mengenai

2 Message
aktifitas yang berlangsung

2.9.4. Class Diagram

Class diagram adalah gambaran konstruksi sistem dari segi class-class

yang didefinisikan yang dibentuk dalam membangun suatu system (Sugiarti, 2018).

Class mempunyai atribut dan operasi atau metode sebagai berikut:

1. Sebuah class memiliki atribut yang berupa variabel-variabel.

2. Atribut menjabarkan sifat menggunakan sebaris teks di dalam kotak

class tersebut.

43
 3. Operasi atau metode adalah fungsi-fungsi yang dimiliki oleh suatu

class.

Class diagram berfungsi untuk menjabarkan berbagai jenis objek yang

terdapat pada sistem yang dibuat serta berbagai hubungan tetap yang terjadiantara

masing-masing objek. Class diagram juga mendeskripsikan operasi dan properti

dari sebuah class serta batasan-batasan yang terdapat dalam hubungan antar objek

tersebut. Class diagram mendeskripsikan struktur class, package, dan objek,

kemudian menjelaskan hubungan-hubungan yang terjadi antar class seperti

containment, asosiasi, pewarisan dan lainnya.

Penggunaan simbol dalam menggambar class diagram adalah seperti

diuraikan dalam tabel di bawah ini:

Tabel 2. 4 Simbol-simbol Class Diagram (Sugiarti, 2018)

No. Simbol Nama Deskripsi

Kelas pada struktur sistem.

1 Class

Interface yang sama pengertiannya

2 Interface seperti dalam pemrograman

berorientasi objek

Relasi antar kelas yang maknanya

3 Association umum, asosiasi biasanya disertai

dengan multiplicity.

44
 Relasi antar kelas yang bermakna
Directed
4 kelas yang satu digunakan oleh
association
kelas yang lain.

Relasi antar kelas yang bermakna

5 Generalization generalisasi-spesialisasi (umum

khusus).

Relasi antar kelas yang bermakna

6 Dependency
kebergantungan antar kelas.

Relasi antar kelas yang bermakna

7 Aggregation
semua bagian (whole-part).

2.10. Konsep Dasar Website

2.10.1. DefinisiWebsite

Website atau yang sering disingkat sebagi web, dapat dikatakan sebagai

kumpulan halaman-halaman yang bermuatan informasi berbentuk data digitalbisa

berupa bentuk text, gambar, video, audio, animasi, dan lainnya yang dapat diakses

dengan perantara internet (Abdulloh, 2016). Singkatnya, halaman yang

diperlihatkan dalam browser seperti Mozila Firefox, Google Chrome atau browser

lainnya yang bermuatan informasi dapat dikatakan sebagai website.

2.10.2. Jenis-Jenis Website

Sejelan dengan pesatnya kemajuan di bidang teknologi informasi di

masa ini, teknologi website pun juga berkembang pesat (Hidayat, 2010). Web dapat

45
dikelompokkan menjadi beberapa jenis, yaitu berdasarkan fungsi, sifat atau style,

serta bahasa pemrograman yang digunakan. Berikut jenis-jenis web:

1. Jenis-jenis web bedasarkan sifat atau style:

a. Website Dinamis, yaitu website yang konten atau isinya terus

berubah-ubah setiap waktu. Website seperti ini biasanya

menggunakan bahasa pemrograman seperti PHP, ASP, .NET.

Database MySQL atau MS SQL juga sudah dipergunakan dalam

website dinamis.

b. Website Statis, ialah website yang konten atau isinya jarang sekali

berubah. Website statis biasanya menggunakan bahasa

pemrograman HTML, namun penggunaan database belum

dimanfaatkan oleh website tersebut.

2. Berdasarkan pada kegunaannya:

a. Personal website, yaitu website yang bermuatan informasi

perseorangan.

b. Commercial website, yaitu website milik perseroan. Website ini

biasanya dipergunakan untuk usaha atau berdagang.

c. Government website, merupakan website milik lembaga

pemerintahan, lembaga pendidikan, atau lembaga resmi lainnya di

dalam pemerintahan. Government website umumnya bertujuan

melayani penggunanya yang biasanya adalah masyarakat.

d. Non-profit Organization website, yaitu website milik organisasi

yang tidak terlibat dalam usaha jual beli.

46
 3. Dari segi bahasa pemrograman yang digunakan, website terbagi atas:

a. Server Side, yaitu website yang bahasa pemrogramannya

tergantung terhadap tersedianya server untuk dapat beroperasi,

Contohnya PHP, ASP, .NET dan sebagainya. Website yang

memanfaatkan bahasa pemrograman server side tidak bisa

berfungsi seperti seharusnya atau tidak bisa berfungsi sama sekali

jika tidak ada server.

b. Client Side, adalah website yang bahasa pemrogramannya tidak

bergantung kepada server untuk dapat beroperasi, cukup

menjalankannya melalui browser, misalnya, HTML.

2.11. PHP: Hypertext Preprocessor

PHP Hypertext Preprocessor, biasa dikenal sebagai PHP, adalah suatu

bahasa pemrograman yang dipakai dalam membangun suatu website yang dinamik

(Saputra, 2011). PHP merupakan satu kesatuan dengan HTML, maksudnya adalah

perbedaan kedua bahasa pemrograman tersebut hanya terdapat di kondisi

pemakaian. Programmer menggunakan HTML landasan kerangka layoutweb,

sedangkan PHP berfungsi untuk melakukan processingnya sehingga maintenance

web akan sangat mudah, dengan digunakannya bahasa pemrograman PHP. PHP

berjalan secara server side, oleh karena itu, PHP mempunyai nama lain: Server Side

Scripting. Maknanya setiap kali programmer ingin menjalankan PHP, butuh

digunakan web server. Salah satu karakteristik PHP adalah open source,

maksudnya adalah PHP mampu digunakan dengan gratis dandapat bekerja lintas

platform, maksudnya dapat beroperasi baik di sistem operasi apapun yang

47
digunakan dalam mengoperasikan bahasa pemrograman PHP. PHP dikembangkan

sebagai bagian web server apache dan juga dikembangkan sebagai binary sehingga

bisa dipergunakan sebagai CGI.

2.11.1. Keunggulan PHP

Sejumlah dasar pertimbangan alasan pemanfaatan PHP, ada beberapa

poin, yaitu:

1. Mudah dipelajari bagi mereka yang masih pemula. Proses

pembelajaran untuk menjadi seorang web master PHP tidaklah

memakan waktu lama dan sulit karena banyak media untuk

mempelajarinya dan untuk mempelajarinya hanya butuh waktu

relatif singkat.

2. Mampu dijalankan lintas Platform. Maksudnya, untuk

mengoperasikan PHP dapat dilakukan ke berbagai platform

Operating System tanpa hambatan yang berarti, PHP juga sudah

didukung oleh hampir semua web browser yang ada.

3. Free, maksudnya PHP dapat digunakan secara gratis, ditambah lagi

PHP bersifat Open Source, sehingga tidak dimiliki oleh instansi

manapun.

4. Tingkat aksesnya cepat.

5. Beberapa macam web server mendukung pengoperasian PHP.

Pengoperasian PHP didukung oleh banyak macam web server.

48
 6. Didukung oleh database. Pengoperasian bahasa pemrograman PHP

didukung oleh beberapa macam database, baik yang berbayar

maupun yang bersifat gratis, seperti MySQL, PostgreSQL, mSQL,

Informix, SQL server, dan Oracle.

2.12. Konsep Dasar Framework Codeigniter

2.12.1. Pengertian Framework

Framework dari bahasa asalnya, yaitu bahasa Inggris, dapat diartikan

sebagai kerangka kerja. Framework adalah suatu konstruksi abstrak dasar yang

dapat dimanfaatkan dalam pemecahan permasalahan-permasalahan yang rumit

(Daqiqil, 2011).

Menggunakan framework memberikan beberapa keuntungan,

diantaranya adalah sebagai berikut (Daqiqil, 2011):

1. Menghemat Waktu Pengembangan,

Tidak perlu lagi mengkhawatirkan waktu pengembangan yang lama

karena struktur library yang telah disediakan oleh framework.

2. Refuse of code

Melalui framework, pekerjaan akan terstruktur rapi, sehingga

resource yang sudah pernah dipakai dapat digunakan kembali untuk

mengembangkan proyek lain di masa depan.

3. Bantuan Komunitas

49
 Bantuan dari komunitas-komunitas yang bisa ditemukan di internet

bisa menjadi alternatif pertama yang bisa dipakai programmer ketika

terjadi permasalahan.

4. Kumpulan Best Practice

Sebuah framework sejatinya memang sudah menjadi kumpulan best

practice yang telah diuji. Jadi dengan mengkombinasikan

kemampuan pengkodeannnya menggunakan framework, seorang

developer dapat meningkatkan kualitas kodenya.

2.12.2. Konsep Dasar Model View Controller (MVC)

Model View Controller, atau lebih dikenal dengan MVC (Daqiqil, 2011)

adalah sebuah pola atau cara pemograman dimana programmer memisahkan

business logic (alur pikir), datalogic (penyimpanan data) dan presentation logic

(antarmuka aplikasi). Sederhananya, dalam MVC, logika desain, data dan proses

semuanya saling dipisahkan.

Adapun komponen yang membentuk MVC adalah sebagai berikut:

1. Model

Model dan data erat kaitan dan hubungannya terhadap database

maupun web service. Model mendeskripsikan pula struktur data

sistem yang dikembangkan, yang bentuknya bisa berupa database

maupun bentuk lainnya, diantaranya berbentuk file teks, file XML,

ataupun web service. Umumnya akan terdapat class dan fungsi-fungsi

yang digunakan untuk mengambil, memperbarui dan menghapus data

pada website di dalam model. Basis data (database) umum digunakan

50
 oleh sebuah aplikasi web dalam menyimpan data, maka perintah-

perintah query SQL biasanya akan terdapat pada bagian model.

2. View

View erat kaitannya dengan apapun yang akan diperlihatkan ke end-

user. View umumnya berbentuk webpage, rss, javascript, atau dalam

bentuk yang lain. Dalam menulis view wajib menghindari logika atau

pengolahan data. Sehingga di dalam view tersusun hanya oleh

variabel-variabel yang mengandung data yang siap dipresentasikan.

Contoh view bisa dalam bentuk webpage yang dibangun memakai

bahasa pemrograman HTML serta ditunjang oleh CSS atau

JavaScript. Wajib diingat dalam view adalah untuk tidak

memasukkan kode penghubung ke database. View khusus

menunjukkan data olahan dari model dan controller.

3. Controller

Controller bertindak sebagai penghubung database dengan view.

Controller berisifungsi-fungsi dan class-class yang memroses query

dari view ke struktur data dalam model. Di dalam controller tidak

boleh ada kode yang mengakses database karena untuk mengakses

database sudah diserahkan kepada model. Sehingga dapat

disimpulkan tugas controller secara keseluruhan adalah menyiapkan

variabel-variabel yang akan ditampilkan dalam view, memanggil

model untuk mengakses database, mempersiapkan penindakan

51
 apabila terjadi kekeliruan, menangani proses logika di dalam aplikasi,

serta mengecek atau memverifikasi input.

2.12.3. Pengertian Codeigniter

Dibandingkan dengan memulai penulisan kode dari awal, developer

dapat menggunakan framework CodeIgniter, yaitu sebuah framework PHP yang

digunakan oleh developer untuk membantu mempercepat mengembangkan aplikasi

web yang berlandaskan pemrograman PHP (Hakim, 2010).

Gambar 2.5 Logo CodeIgniter (Hakim, 2010)

Orang yang pertama kali mengembangkan CodeIgniter adalah Rick Ellis,

CEO dari Ellislab, Inc.(http://ellislab.com). Selain CodeIgniter, Ellislab, Inc. juga

menciptakan CMS (Content Management System) yaitu ExpressionEngine

(http://www.expressionengine.com). Kini, ExpressionEngine Development Team

merupakan pihak yang bertanggung jawab mengembangkan dan melakukan

maintenance terhadap CodeIgniter.

Menggunakan CodeIgniter memberikan beberapa keuntungan

diantaranya:

1. Gratis

52
 Lisensi CodeIgniter merupakan milik Apache/BSD open source.

Karena bersifat open source, maka bebas digunakan oleh siapa saja

2. Dikembangkan memakai PHP 4

Walau CodeIgniter bisa berjalan di PHP 5, tapi hingga sekarang kode

dalam CodeIgniter tetap ditulis dalam bahasa pemrograman PHP 4.

3. Ukurannya Kecil

CodeIgniter ukurannya kecil jika dibandingkan dengan framework-

framework lain, sehingga menjadikannya sebuah keunggulan

tersendiri.

4. Menggunakan Konsep MVC

CodeIgniter memanfaatkan konsep MVC. Sehingga pembagian

antara layer-application logic dan presentation mungkin dilakukan.

5. URL yang Sederhana

URL yang diciptakan menggunakan CodeIgniter secara default

bersifat Search Engine Friendly (SEF) dan sangat rapi.

6. Memiliki Library yang Komplit

Library yang dimiliki CodeIgniter cukup lengkap untuk menangani

berbagai operasi umum yang dibutuhkan dalam sebuah aplikasi

berbasis web contohnya seperti mengakses database, memvalidasi

form, menangani session, mengirim email,dan sebagainya.

7. Extensible

Mengembangkan sistem dapat dilakukan dengan mudah dengan

perantara plugin dan helper, atau dengan memanfaatkan hooks.

53
 8. Tidak Memerlukan Template Engine

Meskipun kita tidak harus menggunakannya dalam membangun

aplikasi, CodeIgniter sudah disertai dengan template parser sederhana

yang mungkin dimanfaatkan developer.

9. Dokumentasi Lengkap dan Jelas

Dari sekian banyak framework yang sudah ada, CodeIgniter

merupakan framework yang memiliki dokumentasi yang lengkap dan

jelas.

10. Komunitas

Sekarang ini, CodeIgniter memiliki komunitas yang

perkembangannya sangat pesat, contoh komunitas tersebut bisa dilihat

di (http://codeigniter.com/forum/)

2.13. Konsep Dasar Database

2.13.1. Definisi Data

Data dapat diartikan sebagai uraian suatu kejadian yang kita jumpai

(Ladjamudin, 2005). Data adalah bahan baku yang nantinya diolah dan

membuahkan informasi (Sutabri, 2012). Data ialah sebuah catatan peristiwa yang

harus diolah demi memperoleh informasi yang dipahami oleh manusia (Hariyanto,

2004). Untuk menyimpan data dapat dilakukan dengan perantara komputer yang

mampu mencadangkan data dalam bentuk video, gambar, suara, dan teks.

Karenanya, fakta, konsep, instruksi, grafik, suara, serta video juga dapat diartikan

54
sebagai data, sehingga dapat dikatakan bahwa sekarang ini pengertian data itu

sendiri sudah bertambah luas.

Dari pengertian diatas penulis menyimpulkan data adalah uraian dari

suatu kejadian yang kita jumpai yang merupakan bahan mentah yang akan diolah

untuk menghasilkan informasi yang merupakan sebuah rekaman peristiwa yang

harus diolahdemi memperoleh informasi yang dipahami oleh manusia. Data itu

sendiri bisa disimpan di media penyimpanan berbentuk komputer yang mampu

mencadangkan data berupa video, gambar, suara, dan teks. Karenanya, data di masa

sekarang ini pengertiannya sangat luaskarena data pada era ini bisa berwujud fakta,

konsep, instruksi, grafik, suara, serta video.

2.13.2. Pengertian Database

Database merupakan tempat menyimpan data yang besar dimana data

yang disimpan tidak terbatas pada data operasional, melainkan mencakup

jugauraian data tersebut. Database berisi data-data yang terkait satu sama lain

secara logis beserta uraian mengenai data tersebut, serta didesain untuk

mendapatkan informasi yang diperlukan oleh sebuah organisasi (Connolly & Begg,

2010). Efisiensi adalah hal yang perlu diperhatikan dalam mendesain sebuah

database. Terlalu banyak redudansi data dapat mengurangi efisiensi data di dalam

database. Database harus tidak dimanfaatkan oleh satu orang saja, namun oleh

seluruh bagian di dalam organisasi. Sehingga database menjadi pusat data bersama

yang dimanfaatkan oleh seluruh bagian organisasi. Database harus menjadi sumber

perusahaan yang saling dibagi, bukan hanya dimiliki oleh satu departemen

(Connolly & Begg, 2010). Untuk dapat memanfaatkan database secara utuh,

55
dengan hanya menggunakan database secara langsung saja tidak cukup, tetapi

diperlukan Database Management System (DBMS) untuk dapat mengatur dan

melakukan manajemen data di dalam database.

2.13.3. MySQL

MySQL merupakan aplikasi Database Server, yang menggunakan

bahasa pemrograman SQLdi dalamnya (Nugroho, 2013). MySQL meliputi bahasa

query dalam database server. Bahasa pemrograman SQL juga digunakan oleh

software database server yang berbeda, diantaranya SQL Server, Oracle,

PostgreSQL. Dalam pembangunan aplikasi berbasis bahasa pemograman PHP,

MySQL merupakan database server yang paling umum dimanfaatkan. MySQL

berfungsi menyimpan data dalam database dan memanipulasi data dalam database.

Bentuk menipulasi data yang bisa dilakukan di dalam MySQL diantaranya adalah

menambah, mengubah, dan menghapus data.

Perintah yang dipergunakan dalam MySQL adalah sebagai berikut

(Nugroho, 2013):

1. show databases: Perintah untuk memperlihatkan database atau

menampilkan database yang sudah ada atau sudah dibuat;

2. Use: Perintah ini digunakan untuk mengakses atau masuk ke dalam

database yang sudah ada;

3. Show tables: Perintah ini digunakan untuk melihat atau menampilkan

semua tabel yang terdapat di dalam database aktif, maksudnya adalah

database yang sudah dibuka dan sudah diperintah menggunakan

perintah use;

56
 4. Desc/describe: Perintah ini digunakan untuk menampilkan struktur

tabel;

5. Quit: Perintah ini dilakukan untuk keluar dari MySQL Server;

2.14. Pengujian Sistem

2.14.1. Pengertian Testing

Uji kelayakan software merupakan proses pembuktian apakah software

sudah mencapai persyaratan yang diharapkan baik dari segi bisnis maupun teknis

dalam perancangan dan pengembangannya, pengujian software juga dilakukan

untuk mengenali kesalahan yang penting yang diklasifikasikan berdasarkan tingkat

severity untuk diperbaiki di dalam aplikasi ke depannya jika ditemukan (Quadri &

Farooq, 2010).

Pengujian software merupakan metode yang sering digunakan untuk

mengecek kualitas suatu software (Nidhra & Dondeti, 2012). Prosedur menjalankan

sebuah program atau software yang bertujuan mencari kesalahan jika ada disebut

sebagai pengujian software.

Dari berbagai pendapat diatas dapat disimpulkan bahwa uji kelayakan

software adalah proses pembuktian apakah software mencapai persyaratan yang

diharapkan dari berbagai aspek dalam perancangannya dan bertujuan untuk

mengenali berbagai kesalahan yang terdeteksi saat menjalankan program.

2.14.2. White Box Testing

57
 Pengujian white box adalah metode pengujian yang menggunakan

struktur kontrol yang digambarkan sebagai bagian dari desain tingkat komponen

untuk menurunkan kasus uji. Dengan menggunakan metode pengujian whitebox,

kasus uji dapat diturunkan sehingga menjamin bahwa semua jalur independen

dalam modul telah dilakukan setidaknya sekali, menjalankan semua keputusan

logis di sisi yang benar dan salah, menjalankan semua loop pada batas-batas

operasionalnya, dan dapat mempraktikkan struktur data internal untuk memastikan

validitasnya (Pressman & Maxim, Software Engineering: A Practitioner's

Approach, 2014).

Dengan menggunakan metode pengujian kotak putih, dapat diperoleh

test case yang (Pressman, Software Engineering: A Practitioner's Approach, 2010):

1. Menjamin bahwa semua jalur independen dalam sebuah

modul telah dieksekusi setidaknya satu kali.

2. Melakukan semua keputusan logis pada sisi benar dan yang salah.

3. Melaksanakan semua loop (putaran) pada batas mereka dan dalam

batas-batas operasional mereka.

4. Melakukan struktur data internal untuk memastikan kesahihannya.

Kelebihan dan kelemahan pengujian white box testing dapat diuraikan

sebagai berikut:

1. Kelebihan White Box Testing:

a. Kesalahan Logika yang terdapat pada sintaks if dan

pengulangan.

58
 White box testing akan mendeteksi kondisi-kondisi yang tidak

sesuai dan mendeteksi kapan proses pengulangan akan berhenti.

b. Ketidaksesuaian Asumsi

Menampilkan asumsi yang tidak sesuai dengan kenyataan,

untuk di analisa dan diperbaiki.

c. Kesalahan Ketik

Mendeteksi bahasa pemrograman yang bersifat case sensitive.

2. Kelemahan White Box Testing:

Untuk perangkat lunak yang tergolong besar, white box testing

dianggap sebagai strategi yang boros, karena membutuhkan sumber

daya yang besar untuk melakukannya. Dalam pengujian white box

testing, ada beberapa langkah yang harus dilakukan, diantaranya:

1. Mendefinisikan semua alur logika

2. Membangun kasus untuk digunakan dalam pengujian

3. Melakukan pengujian

2.14.3. Black Box Testing

Dengan pendekatan kotak hitam, pengujian dilakukan melalui

sekumpulan aktifitas validasi. Black box testing merupakan uji kelayakan software

dari segi fungsinya tanpa mengukur rancangan serta kode di dalam program

tersebut (Rosa & Salahuddin, 2011). Pengujian dilakukan dengan tujuan untuk

mengetahui seluruh fungsi software sudah memenuhi persyaratan yang diharapkan.

Untuk melakukan black box testing, perlu dibuat suatu kasus uji yang mengukur

seluruh fungsi menggunakan software untuk melihat kinerja software apakah sudah

59
memenuhi persyaratan yang diharapkan. Kasus uji black box testing harus memiliki

nilai benar dan nilai salah.

Black box testing menguji tingkah lakudengan menekankan pada aspek

fungsional software (Pressman, Software Engineering: A Practitioner's Approach,

2010). Kondisi-kondisi input yang memanfaatkan semua persyaratan fungsional

secara utuhmilik suatu program mampu diperoleh melalui teknik black box testing.

Beberapa jenis kekeliruan yang mungkin dikenali dengan teknik black box testing

adalah fungsi yang salah atau hilang, kesalahan pada interface, kesalahan pada

struktur data atau pengaksesan database, kesalahan pada performa sistem, serta

kesalahan permulaan dan akhir.

60
61
 BAB III

METODOLOGI PENELITIAN

3.1. Metode Pengumpulan Data

Diperlukan beberapa metodologi untuk mendukung proses perancangan

sistem serta mendukung peneliti dalam proses mengumpulkan data dan informasi

dalam menyusun laporan ini. Metode yang peneliti manfaatkan peneliti untuk

memperoleh data serta informasi yang diperlukan supaya bisa mengetahui

kebenaran mengenai materi uraian pembahasan, metode ini juga digunakan untuk

mendapatkan data terkait dengan kondisi organisasi pada saat ini yang kemudian

akan diolah untuk membuat perancangan sistem yang diusulkan. Metode penelitian

yang peneliti jalankan adalah seperti berikut.

3.1.1. Observasi

Penulis mengamati dan memahami bagaimana proses pencatatan laporan

pelanggaran Peraturan Daerah, pemrosesan laporan pelanggaran Peraturan Daerah,

pengelolaan laporan masuk, dan validasi laporan pelanggaran Peraturan Daerah

pada tahap ini. Peneliti melakukan observasi iniselama 3 bulan mulai dari tanggal

8 Mei 2020 sampai dengan 15 Agustus 2020 di bawah bimbingan dari Bapak

Muksin selaku kepala kantor Satpol PP Kota Tangerang Selatan dan orang yang

bertugas membimbing peneliti selama melakukan penelitian di Satpol PP Kota

Tangerang Selatan yang akan membangun Sistem Informasi Layanan Pengaduan

62
Pelanggaran Peraturan Daerah. Selain itu, data-data pendukung seperti data alur

kerja selama pengamatan untuk dijadikan bahan dalam pengembangan sistem juga

diberikan oleh beliau.

3.1.2. Wawancara

Dalam melakukan metode ini, peneliti akan mewawancarai seseorang

yang kompeten di bidangnya atau melakukan diskusi dengan orang yang memiliki

pemahaman terhadap materi pembahasanuntuk mendapatkan masukan dan data

pendukung dalam pembuatan laporan ini.

Penulis mewawancarai kepala kantor Satpol PP Kota Tangerang Selatan,

Bapak Muksin sebagai pihak yang mengetahui proses dan sistem yang sedang

berjalan di Satpol PP Kota Tangerang Selatan pada metode wawancara ini, serta

satu orang dari pihak masyarakat selaku pihak luar yang melakukan input data ke

dalam sistem. Wawancara juga dilakukan penulis supaya apa saja yang dibutuhkan

dalam mendesain sistem pada nantinya dapat diketahui.

Setelah mewawancarai beberapa pihak, penulis memperoleh informasi,

diantaranya yaitu:

1. Gambaran umum serta informasi mengenai Satpol PP Kota

Tangerang Selatan.

2. Permasalahan dan kendala yang ada di Satpol PP Kota Tangerang

Selatan.

63
 3. Sistem yang sedang berjalan dan gambaran sistem mendatang

mengenai pelaporan pelanggaran Peraturan Daerah pada Satpol PP

Kota Tangerang Selatan.

3.1.3. Studi Pustaka

Pada metode studi pustaka, buku-buku yang memaparkan masalah yang

dikaji dikumpulkan oleh penulis sehingga mendapatkan wawasan yang dapat

dimanfaatkan dalam menyelesaikan permasalahan yang sedang terjadi. Untuk

uraian tentang tulisan, artikel dari internet beserta buku-buku yang penulis gunakan

lebih lengkap, dapat dibaca dalam daftar pustaka.

3.1.4. Studi Literatur Sejenis

Pada metode ini, peneliti menelaah dan mengidentifikasi penelitian

terdahulu yang topiknya berkaitan dengan penelitian yang peneliti lakukan sebagai

referensi. Untuk melakukan ini, peneliti mendalami teori-teori yang berkaitan

dengan penelitian serta mempelajari hasil penelitian sebelumnya yang menunjang

pemecahan masalah dalam penelitian yang dilakukan. Kekurangan-kekurangan

data dari studi lapangan dapat dilengkapi peneliti dalam studi literatur.

Pengumpulan data dapat dilakukan oleh peneliti dengan mengambil data yang dapat

dijadikan referensi dalam membahas masalah dari berbagai sumber seperti media

cetak atau elektronik. Untuk melihat penelitian sejenis yang digunakan oleh peneliti

untuk dijadikan bahan penelitian, uraiannya dijabarkan oleh peneliti pada tabel

berikut:

64
 Tabel 3. 1 Tabel Penelitian Sejenis

Peneliti Lin Jun Wei, Wang Farn, Chu Paul

Tahun 2017
Judul Using Semantic Similarity in Crawling-Based Web
Application Testing
Masalah Aturan berbasis pencocokan string untuk identifikasi
topik masukan banyak digunakan di crawler yang
ada. Namun demikian, aturan untuk satu aplikasi web
mungkin tidak berfungsi untuk yang lain. Akibatnya,
pengguna mungkin harus merekonstruksi atau
menyesuaikan aturan untuk baru untuk aplikasi yang
dibangun. Masalah lain dari pendekatan berbasis
aturan untuk identifikasi topik masukan adalah
sulitnya menentukan topik jika ada banyak kandidat.
1
Tujuan Menyajikan teknik baru dan bahasa alami untuk
mengatasi masalah pendekatan berbasis aturan yang
digunakan dalam pengujian aplikasi web berbasis
crawling
Kelebihan Penelitian ini mempertimbangkan kesamaan
semantik antara korpus pelatihan dan elemen DOM
(Document Object Module) yang akan disimpulkan,
identifikasi topik masukan, perbandingan status
GUI, dan deteksi yang dapat diklik dapat dilakukan
dengan pendekatan yang diusulkan.
Kekurangan algoritma ekstraksi fitur yang diusulkan dapat
ditingkatkan dengan lebih banyak informasi tentang
elemen DOM (Document Object Module) seperti
komentar
Peneliti Fard Amin Milani, Mirzaaghaei Mehdi, Mesbah Ali
Tahun 2014
Judul Leveraging existing tests in automated test
generation for web applications
Masalah Pengujian berbasis DOM (Document Object
2.
Module) bertujuan untuk membawa aplikasi ke state
DOM tertentu melalui serangkaian tindakan, seperti
mengisi formulir dan mengklik elemen, dan
kemudian memverifikasi keberadaan atau properti
(misalnya, teks, visibilitas, struktur) elemen DOM
tertentu di state itu. Status DOM pada dasarnya

65
 adalah versi abstrak dari pohon DOM dari aplikasi
web, yang ditampilkan di browser web saat runtime
Tujuan Fakta bahwa rangkaian pengujian yang ditulis
manusia adalah sumber pengetahuan domain yang
berharga, yang dapat dimanfaatkan untuk mengatasi
beberapa tantangan dalam pembuatan pengujian
aplikasi web otomatis. Motivasi lain di balik
pekerjaan kami adalah bahwa test case yang ditulis
secara manual biasanya sesuai dengan happy-path
paling umum dari aplikasi yang tercakup.
Kelebihan Penelitian ini menggunakan kembali pengetahuan
dalam kasus uji tulisan manusia yang ada dalam
konteks pengujian aplikasi web, penelitian ini juga
menggunakan kembali nilai masukan dan urutan
peristiwa dalam kasus uji untuk menjelajahi jalur
alternatif dan status berita dari aplikasi web, dan
penelitian ini menggunakan kembali oracle dari
kasus uji untuk meregenerasi pernyataan untuk
meningkatkan kemampuan menemukan kesalahan
dari rangkaian uji.
Kekurangan Keefektifan strategi penjelajahan ruang state lainnya
dapat diuji dalam penelitian berikutnya. Misalnya,
diversifikasi jalur uji, dan menyelidiki korelasi antara
keefektifan rangkaian uji asli dan rangkaian uji yang
dihasilkan.

Peneliti Matteo Biagiola, Andrea Stocco, Svizzera Italiana,

Filippo Ricca, Paolo Tonella
Tahun 2019
Judul Diversity-Based Web Test Generation
Masalah Strategi yang berbeda dapat diadopsi untuk
menghasilkan kasus pengujian dari model navigasi.
3. Pada bagian ini, kami membahas secara singkat
solusi yang paling tidak ada tabel yang ada, serta
keterbatasannya, yang memotivasi perlunya
pendekatan baru dan lebih efisien. Sementara semua
pendekatan yang dibahas memberikan jaminan
teoritis konvergensi asimtotik ke nilai input yang
diinginkan, mereka menunjukkan kinerja waktu
eksekusi yang buruk ketika diterapkan ke aplikasi

66
 web, dibandingkan, misalnya, dengan aplikasi
desktop standar Java
Tujuan Tujuan penelitian ini adalah menghasilkan kasus
pengujian web tingkat sistem secara efisien yang
menjalankan perilaku aplikasi secara memadai.
langkah-langkah utama pendekatannya didasarkan
pada inferensi model pengujian sebagai berikut.
Pertama, model navigasi halaman web dinamis
diekstrak. Kedua, setiap halaman web dimodelkan
dalam bentuk objek halaman, kelas berorientasi
objek yang mengekspos tindakan yang dapat
dieksekusi di setiap halaman web sebagai metode.
Terakhir, generator pengujian menggunakan jarak
metrik baru antara tindakan teruji dan data masukan
untuk menghasilkan rangkaian pengujian yang
menjalankan aplikasi web secara menyeluruh.
Kelebihan Di bawah dugaan wilayah ketidaklayakan yang
berdekatan, mempromosikan keanekaragaman
bermanfaat tidak hanya untuk eksplorasi menyeluruh
dari perilaku aplikasi, tetapi juga untuk kelayakan
kasus uji yang dihasilkan secara otomatis.
Sebaliknya, pendekatan berbasis pencarian
menggunakan penjaga dalam model navigasi secara
eksplisit untuk memandu pencarian menuju input
yang memuaskan mereka.
Kekurangan Dalam penelitian berikutnya dapat diteliti tentang
eksperimen metrik jarak alternatif, di antaranya yang
didasarkan pada konsep teori informasi, seperti jarak
kompresi yang dinormalisasi
Peneliti Mesbah Ali
Tahun 2016
Judul Software analysis for the web: Achievements and
prospects.
Masalah Perubahan baru dalam evolusi web tidak hanya
4.
membawa keuntungan tetapi juga datang dengan
serangkaian tantangan baru karena sifatnya yang
heterogen dan terdistribusi. Tiga bahasa, yaitu
JavaScript, CSS, dan HTML / DOM berinteraksi di
sisi klien secara internal, dan melalui jaringan
melalui HTTP dengan setidaknya satu bahasa lain di

67
 sisi server (misalnya, JavaScript, PHP, Ruby, Java,
dll). Apa yang kami saksikan adalah bahwa aplikasi
web yang dibuat dengan model dan teknologi baru
tidak didukung oleh alat yang ada (misal, web
crawling), teknik (misal, analisis dan pengujian
web), dan lingkungan pengembangan (misal,
IDE/Integrated Development Enviroment) yang
biasanya berkembang lebih lambat. Aplikasi web
modern sangat menantang untuk ditangani oleh
pengembang
Tujuan Makalah ini akan memberikan gambaran tentang
beberapa pencapaian dan potensi bidang yang
menantang untuk eksplorasi di masa depan.
Kelebihan Dalam makalah ini, peneliti menyajikan beberapa
tantangan dan pencapaian penelitian yang diuji di
bidang analisis web dan pengujian. Peneliti juga
membahas area potensial yang membutuhkan
perhatian lebih dan memberikan peluang untuk
pengembangan dan penelitian lebih lanjut
Kekurangan Tidak seperti perangkat lunak tradisional, aplikasi
web dibuat dengan menggunakan kombinasi bahasa
yang berbeda, yaitu JavaScript, HTML / DOM, dan
CSS pada klien, yang berkomunikasi dengan satu
atau lebih bahasa seperti Java, PHP, atau JavaScript
di server. Interaksi dinamis antara bahasa-bahasa ini,
dan sifat klien/server asinkron mereka yang
terdistribusi, menimbulkan banyak tantangan dalam
praktiknya. Di sinilah penelitian rekayasa perangkat
lunak dapat memainkan peran penting
5. Peneliti Rika Rahmawati
Tahun 2018
Judul Sistem Pelaporan Kinerja Pegawai Berbasis Web
Pada Kementerian Agama Kabupaten Luwu Utara
Masalah Pemaparan kinerja pegawai kantor Kementrian
Agama Kabupaten Luwu Utara belum terotomasi.
Laporan Kinerja Harian (LKH) pemaparannya
masih memakai perantara kertas tentu sehingga
berdampak secara tidak menyebabkanpenumpukan
lembaran laporan kerja dikantor, menjadi pangkal
masalah penghamburan kertas.

68
 Tujuan Membangun Sistem Pelaporan Kinerja Pegawai
Berbasis Web Pada Kementrian Agama Kabupaten
Luwu Utara yang memangkas penggunaan kertas,
dan mengurangi penumpukan dokumen laporan
kinerja pegawai di kantor
Kelebihan Penelitian ini menggunakan UML sebagai
alatpemodelannya penjelasannya menurut peneliti
sudah cukup detail. Pemilihan sistem yang berbasis
webjuga merupakan keputusan yang sangat baik
karena kelebihan sistem berbasis webadalahdapat
diakses di berbagai platform dan hanya
membutuhkan browser saja mengaksesnya. Sistem
baru yang dibuat memiliki hak akses sehingga tidak
sembarang orang bisa menggunakan sistem. Sistem
baru yang dibuat juga sudah memiliki fitur validasi
laporan, sehingga pimpinan tingkat atas dapat
mengontrol laporan yang terdaftar dalam sistem.
Sistem baru yang dibuat juga memberikan fitur untuk
mencetak laporan secara online sehingga laporan
bisa dicetak dimana saja user berada
Kekurangan Desain interface yang dibuat masih kurang responsif.
Peneliti juga menulis di saran penelitian bahwa
masih terdapat juga beberapa fitur yang dapat
ditambahkan misalnya notifikasi, dan sebagainya
6. Peneliti Nur Hakiki
Tahun 2018
Judul Rancang Bangun Sistem Pelaporan Data Statistik
Desa Pada Kecamatan Pallangga Berbasis Web
Masalah Proses pembuatan laporan-laporan data di desa
masih menggunakan sistem yang belum
terkomputerisasi sehingga membutuhkan waktu
yang lama dan tidak terarsipkan.
Tujuan Membangun Sistem Informasi Pelaparan Data
Statistik Desa berbasis web pada Kecamatan
Pallangga yang diharapkan dapat membantu masalah
lamanya waktu yang dibutuhkan untuk melakukan
pencatatan data kependudukan pada wilayah tersebut
Kelebihan Sistem berbasis web memiliki keunggulan yang
sangat baik yaitu dapat diakses dibanyak platform
dan hanya membutuhkan browser saja untuk

69
 mengaksesnya. Perancangan sistem dalam penelitian
ini menggunakan UML sebagai tools untuk
pemodelannya sehingga penjelasannya detail. Sistem
yang dibuat juga memiliki pembagian hak akses user
sehingga tidak sembarang orang bisa menggunakan
sistem.
Kekurangan Sistem tidak dibangun menggunakan framework
sehingga dokumentasinya mungkin tidak begitu
terstruktur. Pembangunan sistem tanpa
menggunakan framework juga dapat menimbulkan
masalah ketika sistem akan dimigrasi.

Berdasarkan penelitian sejenis diatas peneliti memilih menggunakan

pemrograman berbasis web karena dapat digunakan di berbagai macam platform

sehingga lebih mudah diakses. Berdasarkan kelebihan dan kekurangan sistem

informasi pelaporan pada penelitian sejenis di tabel 3.1 peneliti akan menerapkan

hak akses pada sistem agar tidak sembarang orang dapat mengakses sistem dan

akan menambahkan fitur berupa pelacakan laporan sehingga laporan yang masuk

bisa dilacak statusnya. Peneliti akan melakukan analisis dan perancangan secara

bertahap dan terstruktur agar mudah dipahami.

3.2. Metode Pengembangan Sistem

Penulis memanfaatkan metode berorientasi objek dengan pendekatan

Rapid Aplication Development (RAD) dan menggunakan UML sebagai alat

pemodelan sistem.Bahasa pemrograman yang penulis pergunakan dalam

membangun sistem adalah bahasa pemrograman PHP versi 7.3. UML yang

digunakan adalah versi 2.5.1. Dalam perancangan diagram penulis menggunakan

bantuan software Microsoft Visio 2013. RAD merupakan suatumetode

pengembangan sistem yang mementingkan cepatnya pengembangan sistemdibantu

70
dengan keikutsertaan pengguna yang intensif dalam aktifitas perancangan yang

konstruktif, cepat, dan berulang, yang pada akhirnya digunakan untuk

mengembangkan sebuah sistem yang final. Dalam pembuatan RAD terdapat

beberapa tahap pengembangan yaitu tahap requirement planning, workshop design,

implementation, dan testing.

3.2.1. Tahap Requirement Planning

Pada fase ini, pengguna dan analis bekerja sama mengenalisasaran-

sasaran sistem yang akan dibuat. Dituntut adanya kerjasama yang giat darimasing-

masing pihak. Dan tujuan pokok tahap ini adalah untuk menggapai tujuan

organisasi. Pada tahap ini peneliti melakukan diskusi bersama Bapak Muksin selaku

kepala Kantor Satpol PP Kota Tangerang Selatan. Diskusi ini bertujuan untuk

mengidentifikasi tujuan dan kebutuhan sistem yang akan dibuat. Setelah melakukan

diskusi, peneliti memperoleh hasil sebagai berikut:

1. Analisis masalah

Peneliti menganalisa permasalahan yang ada diSatpol PP Kota

Tangerang Selatan terutama masalah pencatatan laporan masuk dan

keluar, pendistribusian laporan, dan pembuatan laporan pelanggaran

Peraturan Derah. Pada tahap ini peneliti menganalisa sistem

pelaporan Pelanggaran Peraturan Daerah yang sedang berjalan pada

Satpol PP Kota Tangerang Selatan.

2. Analisa kebutuhan sistem

71
 Peneliti menguraikan kebutuhan yang wajib dipenuhi untuk

membangun Sistem Informasi Layanan Pengaduan Pelanggaran

Peraturan Daerah di Satpol PP Kota Tangerang Selatan pada tahap

ini.

a. Desain Proses

Tahap ini menjelaskan bagaimana sistem yang diusulkan dirancang.

Tahapan-tahapan dalam merancang sistem yang diusulkan adalah:

1. Menggambarkan use case diagram

Dalam menggambar diagram use case, tahapannya yaitu:

a. Mengidentifikasi aktor

Penulis mengenali aktor-aktor yang dapat mengakses sistem

pada tahap ini.

b. Mengidentifikasi usecase

Penulis menjelaskan nama usecase berikut aktor-aktor yang

terkait di dalamnya untuk mengidentifikasiusecase.

c. Merancang usecase

Setelah usecase dan aktor diidentifikasi, maka langkah

selanjutnya penulis membuat perancangan usecase dengan

membuat gambaran hubungan antar usecase dengan aktor

dalam sistem.

d. Membuat usecase narrative

72
 Penulis membuat uraian usecase yang sebelumnya

diidentifikasi saat membuat diagram usecase pada tahap ini.

2. Membuat activity diagram

Peneliti menggambarkan aliran kerja dari suatu aktivitas ke aktivitas

lainya untuk mengutarakan bagaimana sistem bekerja secara

keseluruhan.

b. Desain Database

Pada tahap ini penulis menjelaskan pembuatan database sistem yang

diusulkan. Adapun tahapan-tahapan yang diperlukan dalam merancang database

sistem yang dikembangkan adalah:

1. Membuat Class Diagram

Peneliti menggambarkan class objek yang menyusunSistem

Informasi Layanan Pengaduan Pelanggaran Peraturan Daerah dan

hubungannya secara grafis.

2. Membuat Mapping Cardinality

Pada tahap ini dilakukan pemetaan derajat hubungan antar kelas

objek didalam beserta foreign key yang menghubungkan hubungan

tersebut.

3. Menggambar diagram sekuens

Tahap ini menggambarkan hubungan objek yang ditata dalam suatu

rentetan waktu langkah demi langkahtentang proses yang

wajibberjalan untuk mencapai hasil di dalam usecase akan

dijelaskan oleh peneliti.

73
 4. Membuat Spesifikasi Database

Pada tahap ini, dilakukan spesifikasi data dari sistem inventory ini,

berupa tipe data, tipe file, key entitas, struktur database, dan

pembagian hak akses database berdasarkan level aktor.

c. Desain Interface

Setelah dilakukan perancangan menggunakan UML, selanjutnya penulis

merancang tampilan antarmuka untuk memudahkan user dalam menggunakan

aplikasi yang akan dibuat oleh penulis. Penulis menggunakan aplikasi Microsoft

Visio 2013 dalam membuat desain interface.

3.2.2. Tahap Implementation

Pada tahap ini rancangan yang telah dibangun akan diimplementasikan

dengan melakukan pemrograman yang disesuaikan dengan rangcangan yang ada.

Pada tahap ini juga dilakukan instalasi program yang dibutuhkan untuk mengakses

sistem yang telah dibangun berbasis web seperti browser dan melakukan

konfigurasi agar sistem berjalan dengan baik.

3.2.3. Tahap Testing

Penulis melakukan black box testing kepada sistem yang sudah dibangun.

Black box testing bertujuan untuk mengukur fungsionalitas aplikasi apakah sistem

memenuhi persyaratan yang ditetapkan atau tidak, jika belum memenuhi

persyaratan maka sistem akan diperbaiki.

74
3.3. Kerangka Penelitian

Berdasarkan metode penelitian yang sudah ditentukan peneliti dari awal

hingga akhir penelitian, didapatkan kerangka penelitian sebagai berikut:

Gambar 3. 1 Kerangka Penelitian

75
76
 BAB IV

HASIL DAN PEMBAHASAN

4.1. Gambaran Umum Satpol PP Kota Tangerang Selatan

Satpol PP awalnya dibentuk di kota Yogyakarta tanggal 3 Maret 1950

dengan semboyan PRAJA WIBAWA. Polisi Pamong Praja bertugas menampung

sebagian tugas pemerintah daerah. Lembaga yang memiliki tugas seperti ini

sebenarnya sudah ada sejak zaman kolonial. Setelah proklamasi kemerdekaan, pada

awal pembentukan negara kondisi ketidakstabilan negara mengancam NKRI,

sebelum dikenal sebagai Satpol PP seperti sekarang, awalnya dibentuk Detasemen

Polisi yang bertugas sebagai Penjaga Keamanan Kapanewon di Yogyakartauntuk

mewujudkan ketentraman dan memelihara ketertiban lingkungan seperti isi Surat

Perintah Jawatan Praja di Daerah Istimewa Yogyakarta.

Gambar 4. 1 Logo Satpol PP

77
 Tanggal 10 November 1948, Instrumen ini diganti namanya sebagai

Detasemen Polisi Pamong Praja. Sedangkan, di Jawa dan Madura, Satpol PP

didirikan pada tanggal 3 Maret 1950. Awal terbentuknya Satpol PP adalah peristiwa

ini. Karenanya, tanggal 3 Maret diperingati setiap tahun sebagai Hari Jadi Satpol

PP.

Pada Tahun 1960, diawali dengan terbentuknya Satpol PP di luar Jawa

dan Madura. Didukung oleh tokoh-tokoh militer/Angkatan Perang, pada Tahun

1962, nama Polisi Pamong Praja diubah menjadi Kesatuan Pagar Baya supaya

memisahkan dengan korps Kepolisian Negara sesuai dengan isi UU No 13/1961

tentang Pokok-pokok Kepolisian.

Kemudian namanya kembali diganti menjadi Kesatuan Pagar Praja pada

tahun 1963. Sejak UU No 5/1974 terkait Pokok-pokok Pemerintahan di Daerah

diberlakukan, barulah sebutanSatpol PP mencuat. Di dalam Pasal 86 (1) disebutkan

bahwa Satpol PP adalah perangkat wilayah yang menegakkan tugas-tugas

dekonsentrasi.

Saat ini, UU 5/1974 sudah tidak berlaku lagi karena sudah digantikan UU

No 22/1999 yang kemudian direvisi menjadi UU No 32/2004 tentang Pemerintahan

Daerah. Sesuai dengan isi Pasal 148 UU 32/2004, Polisi Pamong Praja merupakan

satuan milik pemerintah daerah yang tugas pokoknya adalah menegakkan perda,

menjaga ketertiban umum, dan mewujudkan ketenteraman masyarakat sebagai

wujud penegakan tugas desentralisasi.

78
 Gambar 4. 2 Struktur Organisasi Satpol PP Kota Tangerang Selatan

Berikut merupakan tugas dan peran setiap bagian yang ada pada struktur

organisasi Satpol PP Kota Tangerang Selatan:

1. Kepala Satpol PP, tugas pokoknya adalah mengerjakan perkara

pemerintah daerah berdasarkan asas otonomi dan tugas pembantuan

di bidang penyelenggaraan ketertiban umum, ketentraman

masyarakat, ketertiban masyarakat dan penegakan Peraturan Daerah

dan Peraturan Bupati.

2. Sekretaris,tugas pokoknya adalah merencanakan, melakukan

pembinaan, koordinasi serta pengawasan dan pengendalian,

pengelolaan umum, pengelolaan kepegawaian, dan perencanaan dan

pengelolaan keuangan.

79
 3. Bidang Ketertiban Umum dan Ketentraman Masyarakat, tugas

pokoknya adalah mengepalai, mengatur dan mengarahkan berbagai

pekerjaan dalam aspek menjaga ketertiban umum dan mewujudkan

ketentraman masyarakat meliputi kerjasama serta ketertiban

protokoler.

4. Bidang Penegakan Peraturan Daerah, tugas pokoknya adalah

memimpin, mengatur, mengarahkan, dan menanggung berbagai

tugas dalam aspek penindakan peraturan daerah yang mencakup

pendataan, pemeliharaan, konseling, serta pengawasan.

5. Bidang Operasi dan Sumber Daya Aparatur,tugas pokoknya adalah

mengepalai, mengatur, dan mengarahkan berbagai pekerjaan dalam

aspek operasi dan sumber daya aparatur meliputi pengendalian

operasional dan aparatur.

6. Bidang Perlindungan Masyarakat, tugas pokoknya adalah

memimpin, merencanakan, melaksanakan, mengatur, menilai, dan

melaporkan hasil penegakan pekerjaan perantaraan, pemfasilitasi,

serta berdialog mengarahkan Satuan Perlindungan Masyarakat

untuk menanggulangi bencana sekaligus mengamankan lingkungan.

4.2. Fase Requirement Planning

4.2.1. Analisis Permasalahan

Pada tahap ini peneliti menganalisis apa saja permasalahan yang ada pada

sistem pelaporan pelanggaran Peraturan Daerah yang sedang berjalan untuk

80
menghasilkan sistem usulan yang dimanfatkan untuk memecahkan masalah dalam

sistem berjalan.

a. Analisis Sistem Berjalan

Setelah melakukan observasi dan pengamatan, berikut merupakan sistem

berjalan layanan pelaporan pelanggaran peraturan daerah hingga pembuatan

laporan laporan pelanggaran peraturan daerah yang masuk:

1. Memberikan laporan 2. Mendistribusikan Laporan

Pelapor Pusat Informasi Publik Kantor Satuan Polisi PP Daerah

4. Melakukan Penindakan 3.Memberikan Laporan

Tempat Kejadian Satuan Polisi PP Daerah

Gambar 4. 3 Analisis Sistem Berjalan

b. Narasi Sistem Berjalan

Narasi sistem berjalan merupakan pemaparan atau penjelasan tentang

langkah-langkah suatu kegiatan pada sistem yang berjalan. Berikut adalah narasi

sistem berjalan yang ada saat ini di Satpol PP Kota Tangerang Selatan:

1. Pelapor melaporkan adanya pelanggaran Peraturan Daerah ke Pusat

Informasi Publik.

2. Pusat Informasi Publik menditribusikan laporan ke Kantor Satpol PP

Daerah masing-masing.

3. Kantor Satpol PP Daerah memberikan laporan daftar laporan yang

diterima kepada Satuan Anggota Polisi Pamong Praja.

81
 4. Anggota Satpol PP untuk mengirimkan anggota supaya dilakukan

penindakan.

c. Identifikasi Masalah Sistem Berjalan

Penulis melakukan analisis dan mengidentifikasi beberapa masalah,

diantaranya adalah sebagai berikut:

1. Pelapor hanya bisa melapor ke Pusat Informasi Publik yang biasanya

hanya terdapat satu di masing-masing kabupaten sehingga bagi

mereka yang bertempat tinggal jauh dari tempat melapor banyak

yang merasa sulit untuk melakukan pelaporan.

2. Tidak bisa melakukan pelacakan terhadap laporan karena untuk

dokumen laporan masih menggunakan cara lama atau manual

sehingga jalannya laporan dari Pusat Informasi Publik setempat

menuju ke Satpol PP setempat tidak dapat dikendalikan oleh pelapor.

Ini bisa berdampak penindakan yang harusnya dilakukan terlambat

dikerjakan.

3. Penggunaan kertas yang banyak karena sistem sebelumnya masih

dilakukan secara manual, maka terdapat banyak penumpukan kertas

baik di Pusat Informasi Daerah, maupun di kantor Satpol PP

setempat untuk laporan yang dibuat oleh masyarakat.

82
4.2.2. Analisis Sistem Usulan

a. Sistem Usulan

Berdasarkan permasalahan yang ada penulis melakukan analisis dan

memberikan solusi berupa sistem usulan yang nantinya akan digunakan oleh

organisasi. Berikut ini adalah sistem yang akan diusulkan:

Gambar 4. 4 Sistem Usulan

b. Narasi Sistem Usulan

Narasi sistem usulan merupakan pemaparan atau penjelasan tentang

langkah-langkah suatu kegiatan pada sistem yang dikembangkan. Uraian narasi

sistem yang diusulkan adalah seperti berikut:

1. Pelapor mengakses Sistem Informasi Layanan Pengaduan Daerah

(SILAPPERDA) dan memberikan laporan pelanggaran Peraturan

Daerah.

2. Admin melihat data laporan yang dimasukkan oleh pelapor dan

memvalidasi serta menghubungi pelapor melalui sistem.

83
 3. Pelapor menerima pesan dari admin dan mendatangi kantor Satpol

PP setempat untuk memastikan bahwa laporan yang diberikan

adalah benar.

4. Kantor Satpol PP setempat menghubungi admin untuk memberitahu

bahwa laporan yang diberikan oleh pelapor adalah benar.

5. Admin menerima informasi dari kantor Satpol PP setempat bahwa

laporan yang diterima adalah benar dan mengklarifikasi laporan.

4.3. Fase Workshop Design

4.3.1. Desain Proses

Fase ini menguraikan proses mendesain sistem yang diusulkan, mulai

dari pembuatan diagram use case, diagram aktifitas, diagram sekuens, dan class

diagram.

a. Use Case Diagram

Use case diagram adalah diagram yang mendefinisikan aktivitas-

aktivitas yang dilakukan sistem yang akan dibangun besertasiapa saja yang

melakukan interaksi dengan sistem tersebut. Perancangan use case diagram

memerlukan beberapa tahap diantaranya pengenalan aktor, pengenalan use case,

pemodelan use case, serta menguraikan use case.

1. Identifikasi Aktor

Identifikasi aktor menguraikan siapa saja yang terlibat dalam Sistem

Informasi Layanan Pengaduan Pelanggaran Peraturan Daerah beserta uraian terkait

masing-masing aktor. Berikut ini adalah uraian tentang masing-masing aktor yang

84
terlibat dalam Sistem Informasi Layanan Pengaduan Pelanggaran Pertaturan

Daerah pada Satpol PP Kota Tangerang Selatan:

Tabel 4. 1 Identifikasi Aktor

ID Aktor Deskripsi
AC-01 Pelapor Aktor yang memberikan laporan pelanggaran Peraturan
Daerah dan melacak laporan yang sudah dimasukkan ke
sistem.
AC-02 Admin Aktor yang dapat memvalidasi data laporan yang sudah
diberikan oleh pelapor, menghubungi pelapor melalui
sistem, mengklarifikasi data laporan yang sudah
diberikan oleh pelapor, menolak data laporan yang sudah
diberikan oleh pelapor, serta mencetak laporan mengenai
data laporan yang sudah diberikan oleh pelapor.
AC-03 Satuan Aktor yang dapat mengkonfirmasi status data laporan
yang dimasukkan ke dalam sistem sebelum diolah oleh
admin.

2. Identifikasi Use Case

Setelah mengidentifikasi aktor, yang harus dilakukan adalah

mengidentifikasiuse case. Use case memaparkan hubungan suatu aktivitas dengan

aktor yang terlibat. Identifikasi use case dijabarkan pada tabel 4.3 berikut ini:

Tabel 4. 2Identifikasi Use Case

ID Nama Use Deskripsi Aktor

Case
UC-01 Lapor Use case ini menggambarkan Pelapor
kegiatan memasukkan data
laporan pelanggaran Peraturan
Daerah.
UC-02 Track Use case ini menggambarkan Pelapor
Laporan kegiatan melacak status
laporan yang sudah
dimasukkan.

85
 UC-03 Login Use case ini menceritakan Admin, Satuan
kegiatan memasukkan data id
admindan password untuk
dapat masuk ke dalam sistem.
UC-04 Konfirmasi Use case ini menggambarkan Satuan
Status kegiatan mengkonfirmasi
validnya data laporan,
mengkonfimasi bahwa data
laporan dapat diklarifikasi,
dan mengkonfirmasi bahwa
data laporan sudah selesai
ditindak.
UC-05 Manajemen Use case ini menggambarkan Admin
Laporan kegiatan memvalidasi data
laporan, menghubungi
pelapor, menolak data
laporan, dan mencetak data
laporan.
UC-06 Klarifikasi Use case ini menggambarkan Admin
Laporan kegiatan memklarifikasi
laporan yang sudah di
validasi.
UC-07 Selesaikan Use case ini menggambarkan Admin
Laporan kegiatan menyelesaikan
laporan yang sudah di
klarifikasi.
UC-08 Logout Use case ini menggambarkan Admin
prosedur keluar dari sistem

3. Pemodelan Use Case Diagram

Setelah mengidentifikasi para aktor yang terkait dan use case yang ada,

yang selanjutnya dilakukan adalah pemodelan diagram use case. Diagram Use case

Sistem Informasi Layanan Pengaduan Pelanggaran Peraturan Daerah pada Satpol

PP Kota Tangerang Selatan digambarkan di bawah ini:

86
 Gambar 4. 5Use Case Diagram Sistem Informasi Layanan Pengaduan Pelanggaran Peraturan
Daerah

4. Use Case Narrative

Setelah melakukan pemodelan diagram use case, setiap diagram use

case yang ada lalu dijelaskan menggunakan use case narrative untuk menjelaskan

interaksi antara aktor dengan use case tersebut.

Tabel 4. 3Use Case Narrative Lapor

Nama Use Case: Lapor ID: UC-01

Aktor: Pelapor
Deskripsi singkat: Use case untuk menambahkan data laporan ke dalam sistem
Prasyarat: User sudah membuka halaman awal sistem
Kondisi akhir: User berhasil menambahkan data laporan ke dalam sistem
Aliran Normal: Respons Sistem:
1. User membuka halaman awal 2. Menampilkan halaman awal
sistem sistem
3. User mengeklik link lapor 4. Menampilkan form laporan yang
berisi:
a. Input teks NIK
b. Input teks nama lengkap

87

5. User mengeklik tombol laporkan
Aliran Alternatif:
A1: Data yang dimasukkan kurang
6a. Sistem mengirimkan pesan untuk mengisi data yang kurang
Aliran kembali ke langkah 4
Subaliran:
Aliran salah:
c. Input teks tempat lahir
d. Input tanggal lahir
e. Input teks jenis kelamin
f. Input teks alamat
g. Input teks pekerjaan
h. Input file foto KTP
i. Input teks nomor telepon
j. Input teks nomor whatsapp
k. Inputtanggal kejadian
pelanggaran Perda
l. Input teks tempat kejadian
pelanggaran Perda
m. Input teks nama terlapor
n. Input teks nama korban
o. Input teks apa yang terjadi
p. Input teks bagaimana kejadian
terjadi
q. Input teks jenis tindak pidana
r. Input teks nama saksi
s. Input teks uraian kejadian
t. Input file bukti/foto kejadian
6. Menampilkan halaman konfirmasi
bahwa laporan telah berhasil
dilaporkan.

Tabel 4. 4Use Case Narrative Track Laporan

Nama Use Case: Track Laporan ID: UC-02

Aktor: Pelapor
Deskripsi singkat: Use case untuk melacak status data laporan
Prasyarat: User sudah membuka halaman awal sistem
Kondisi akhir: User berhasil melacak data laporan di dalam sistem
Aliran Normal: Respons Sistem:

88
1. User mengeklik link track laporan 2. Menampilkan track laporan yang
berisi
a. Input teks NIK
3. User mengeklik tombol track 4. Menampilkan informasi tentang
laporan. laporan yang diinput pelapor
sesuai NIK yang diinput
Aliran Alternatif:
A1: Laporan yang dilacak tidak sesuai
4a. Sistem mengirimkan pesan untuk mengisi data yang kurang
Aliran kembali ke langkah 2
Subaliran:
Aliran salah:

Tabel 4. 5Use Case Narrative Login Admin

Nama Use Case: Login Admin ID: UC-03

Aktor: Admin
Deskripsi singkat: Use case untuk masuk ke dalam sistem
Prasyarat: User sudah masuk ke halaman login dan sudah terdaftar
Kondisi akhir: User berhasil masuk ke dalam sistem
Aliran Normal: Respons Sistem:
1. User membuka halaman login 2. Menampilkan halaman login
dengan form login yang berisi:
a. Kotak teks username
b. Kotak teks password
3. User mengisi form login
4. User mengeklik tombol Login 5. Menampilkan halaman
dashboardadmin Sistem
Informasi Layanan Pengaduan
Pelanggaran Peraturan Daerah.
Aliran Alternatif:
A1: Salah username atau password
5a. Sistem menampilkan pesan username atau password salah
Aliran kembali ke langkah 2
Subaliran:
Aliran salah:

89
 Tabel 4. 6Use Case Narrative Konfirmasi Status

Nama Use Case: Konfirmasi Status ID: UC-04

Aktor: Satuan
Deskripsi singkat: Use case untuk mengkonfirmasi status data laporan
Prasyarat: User sudah berhasil login masuk ke dalam sistem dengan level user
sebagai satuan
Kondisi akhir: User berhasil mengkonfirmasi status laporan
Aliran Normal: Respons Sistem:
1. User mengeklik linkdata laporan. 2. Menampilkan tabel yang berisi
data laporan.
3. User mengeklik tombol detail 4. Menampilkan detail laporan
5. User mengeklik tombol 6. Memvalidasi data laporan yang
konfirmasi validasi dipilih dan mengubah status
laporan menjadi dapat divalidasi
7. User mengeklik tombol reject 8. Menolak laporan yang dipilih dan
mengubah status laporan menjadi
terkonfirmasi tidak valid

Subaliran:
Aliran salah:

Tabel 4. 7Use Case Narrative Manajemen Laporan

Nama Use Case: Manajemen Laporan ID: UC-05

Aktor: Admin
Deskripsi singkat: Use case untuk mengelola data laporan
Prasyarat: User sudah berhasil login masuk ke dalam sistem dengan level user
sebagai admin
Kondisi akhir: User berhasil mengelola data barang
Aliran Normal: Respons Sistem:
1. User mengeklik linkdata laporan. 2. Menampilkan tabel yang berisi
data laporan.
3. Usermengeklik tombol detail 4. Menampilkan detail laporan
5. User mengeklik tombolkontak 6. Mengarahkan user ke website
WA whatsapp web untuk selanjutnya
melakukan login ke akun
whatsappnya lalu menghubungi
pelapor

90
7. Usermengeklik tombol cetak
9. User mengeklik tombol validasi
11. User mengeklik tombol reject
8. Mengirimkan file laporan ke
komputer user
10. Memvalidasi data laporan yang
dipilih dan mengubah status
laporan menjadi valid
12. Menolak laporan yang dipilih dan
mengubah status laporan menjadi
tidak valid

Subaliran:
Aliran salah:

Tabel 4. 8Use Case Narrative Klarifikasi Laporan

Nama Use Case: Klarifikasi Laporan ID: UC-06

Aktor: Admin
Deskripsi singkat: Use case untuk mengklarifikasi data laporan
Prasyarat: User sudah berhasil login masuk ke dalam sistem dengan level user
sebagai admin, dan data laporan yang ada sudah tervalidasi
Kondisi akhir: User berhasil mengklarifikasi data laporan
Aliran Normal: Respons Sistem:
1. User mengeklik linkdata laporan 2. Menampilkan tabel yang berisi
data laporan
3. Usermengeklik tombol detail 4. Menampilkan detail laporan
laporan yang statusnya sudah
tervalidasi
5. User mengeklik tombolkontak 6. Mengarahkan user ke website
WA whatsapp web untuk selanjutnya
melakukan login ke akun
whatsappnya lalu menghubungi
pelapor
7. Usermengeklik tombol cetak 8. Mengirimkan file laporan ke
komputer user
9. User mengeklik tombol klarifikasi 10. Mengklarifikasi data laporan yang
dipilih dan mengubah status
laporan menjadi klarifikasi.
11. User mengeklik tombol reject 12. Menolak laporan yang dipilih dan
mengubah status laporan menjadi
tidak valid.

91
Subaliran:
Aliran salah:

Tabel 4. 9Use Case NarrativeSelesaikan Laporan

Nama Use Case: Selesaikan Laporan ID: UC-07

Aktor: Admin
Deskripsi singkat: Use case untuk menyelesaikan pelayanan data laporan
Prasyarat: User sudah berhasil login masuk ke dalam sistem dengan level user
sebagai admin, dan data laporan yang ada sudah terklarifikasi.
Kondisi akhir: User berhasil menyelesaikan pelayanan data laporan
Aliran Normal: Respons Sistem:
1. User mengeklik linkdata laporan 2. Menampilkan tabel yang berisi
data laporan
3. Usermengeklik tombol detail 4. Menampilkan detail laporan
laporan yang statusnya sudah
tervalidasi
5. User mengeklik tombolkontak 6. Mengarahkan user ke website
WA whatsapp web untuk selanjutnya
melakukan login ke akun
whatsappnya lalu menghubungi
pelapor
7. Usermengeklik tombol cetak 8. Mengirimkan file laporan ke
komputer user
9. User mengeklik tombol selesai 10. Menyelesaikan pelayanan data
laporan yang dipilih dan
mengubah status laporan menjadi
selesai.
11. User mengeklik tombol reject 12. Menolak laporan yang dipilih dan
mengubah status laporan menjadi
tidak valid.

Subaliran:
Aliran salah:

Tabel 4. 10Use Case Narrative Logout

Nama Use Case: Logout ID: UC-08

Aktor: Admin
Deskripsi singkat: Use case untuk keluar dari sistem

92
 Prasyarat: User sudah berhasil login masuk ke dalam sistem dengan level user
sebagai admin.
Kondisi akhir: User berhasil keluar dari sistem
Aliran Normal: Respons Sistem:
1. User mengeklik link keluar 2. Menampilkan halaman login

Subaliran:
Aliran salah:

b. Activity Diagram

Berdasarkanuse case yang telah ditetapkan sebelumnya, dilakukan

pemodelan langkah-langkah proses atau aktivitas dari Sistem Layanan Pengaduan

Pelanggaran Peraturan Daerah (SILAPPERDA) pada Satpol PP Kota Tangerang

Selatan.

93
 Gambar 4. 6 Activity Diagram Lapor

Aktivitas yang dijelaskan pada gambar 4.6 sebelumnya dapat diakses

oleh pelapor untuk dapat memasukkan data laporan ke dalam sistem.

94
 Gambar 4. 7 Activity Diagram Track Laporan

Aktivitas ini dapat diakses oleh pelapor untuk melacak status data

laporan yang sudah dimasukkan.

95
 Gambar 4. 8 Activity Diagram Login Admin

Aktivitas ini dapat diakses oleh admin untuk dapat masuk ke dalam

sistem.

96
 Gambar 4. 9 Activity Diagram Konfirmasi Status

Aktivitas ini dapat diakses oleh satuan untuk mengkonfirmasi status

data laporan yang masuk ke dalam sistem.

97
 Gambar 4. 10 Activity Diagram Manajemen Laporan

Admin dapat mengakses aktifitas ini untukmengurus data laporandi

dalam sistem.

98
 Gambar 4. 11 Activity Diagram KlarifikasiLaporan

Admin dapat mengakses aktifitas ini untuk mengklarifikasi data laporan

di dalam sistem.

99
 Gambar 4. 12 Activity Diagram SelesaikanLaporan

Admin dapat mengakses aktifitas ini untuk menyelesaikan pelayanan

data laporan di dalam sistem

100
 Gambar 4. 13 Activity Diagram Logout

Aktivitas ini dapat diakses oleh admin untuk dapat keluar dari sistem

setelah selesai menggunakan sistem.

4.3.2. Desain Database

a. Class Diagram

Tahapan pertama dalam mendesain suatu database pada penelitian ini

adalah membuat class diagram. Class diagram dari Sistem Informasi Layanan

Pengaduan Pelanggaran Peraturan Daerah pada Satpol PP Kota Tangerang Selatan

digambarkan di bawah ini:

101
 Gambar 4. 14 Class Diagram Sistem Informasi Layanan Pengaduan Pelanggaran Peraturan

Daerah

b. Mapping Cardinality

Setelah membuat class diagram tahapan selanjutnya adalah membuat

mapping cardinality dimana akan ada penjelasan mengenai primary key dan foreign

key dalam setiap tabelnya. Berikut adalah mapping cardinality dari sistem informasi

102
layanan pengaduan pelanggaran Peraturan Daerah pada Satpol PP Kota Tangerang

Selatan:

Gambar 4. 15Mapping Cardinality Sistem Informasi Layanan Pengaduan Pelanggaran Peraturan

Daerah

103
c. Spesifikasi Database

Setelah selesai membuat mapping cardinality tahapan selanjutnya adalah

membuat spesifikasi database untuk menjelaskan spesifikasi dan detail-detail

setiap tabel yang ada. Berikut adalah spesifikasi database pada sistem informasi

inventory barang di penelitian ini:

1. Laporan

Nama Tabel : laporan

Primary Key : id_laporan

Foreign Key :-

Jenis Tabel : Master

Tabel 4. 11Tabel Laporan

No. Field Type Size Keterangan

1 id_laporan int 10 Nomor identitas laporan
2 no_laporan varchar 255 Nomor laporan yang tercatat dalam
dokumen
3 tanggal date - Tanggal terjadinya pelanggaran
4 tempat varchar 255 Tempat tinggal pelapor
5 terlapor varchar 255 Nama orang terlapor
6 korban varchar 255 Nama korban
7 apa_terjadi varchar 255 Uraian mengenai apa yang terjadi
8 file_ktp varchar 255 File KTP yang diinput pelapor
9 bagaimana text - Uraian lebih rinci mengenai
bagaimana kejadian pelanggaran
terjadi
10 tanggal_lapor date - Tanggal laporan dibuat di dalam
sistem
11 nik_pelapor varchar 50 Nomor induk kependudukan milik
pelapor
12 nama_pelapor varchar 255 Nama orang yang melapor
13 no_hp varchar 20 Nomor kontak handphone orang
yang melapor

104
14 no_wa varchar 20 Nomor kontak orang yang melapor
yang dapat dihubungi melalui
whatsapp
15 tindak_pidana text - Uraian mengenai tindak pidana apa
saja yang terdapat dalam
pelanggaran yang dilaporkan
16 saksi text - Uraian mengenai nama saksi-saksi
yang melihat tindak pelanggaran
17 uraian_kejadian longtext - Uraian mengenai kejadian
pelanggaran secara lebih rinci
18 tindakan text - Uraian mengenai tindakan apa saja
yang sudah dilakukan mengenai
pelanggaran yang terjadi
19 latitude varchar 255 Koordinat dimana tempat
pelanggaran terjadi
20 longitude varchar 255 Koordinat dimana tempat
pelanggaran terjadi
21 created_by varchar 255 Uraian mengenai siapa yang
membuat laporan
22 created_date datetime - Uraian mengenai kapan laporan
dibuat

2. File Laporan

Nama Tabel : laporan_file

Primary Key : id_laporan_file

Foreign Key : id_laporan

Jenis Tabel : Transaksi

Tabel 4. 12 Tabel File Laporan

No. Field Type Size Keterangan

1 id_laporan_file int 10 Nomor identitas file dokumen
laporan dalam sistem
2 id_laporan int 10 Nomor identitas laporan

105
3 file text - Teks yang menyertai nomor
identitas sistem dalam membentuk
dokumen laporan

3. Status

Nama Tabel : status

Primary Key : id_status

Foreign Key :-

Jenis Tabel : Transaksi

Tabel 4. 13 Tabel Status

No. Field Type Size Keterangan

1 id_status varchar 2 Nomor yang digunakan sistem untuk
menyatakan status persetujuan data
laporan
2 status varchar 255 Keterangan yang menjelaskan status
persetujuan data berdasarkan angka pada
id_status

4. Users

Nama Tabel : users

Primary Key : id_user

Foreign Key :-

Jenis Tabel : Master

Tabel 4. 14 Tabel Users

No. Field Type Size Keterangan

1 id_user int 10 Nomor identitas user
2 username varchar 255 Nama user
3 password varchar 255 Kata sandi yang digunakan user
4 email varchar 255 Email yang digunakan user

106
 5 nama_user varchar 255 Nama lengkap user
6 id_level int 2 Nomor identitas yang menunjukkan
tingkatan user dalam sistem
7 aktif int 1 Nomor yang menunjukkan status apakah
user aktif atau tidak di dalam sistem

d. Sequence Diagram

Tahap selanjutnya merupakan perancangan diagram sekuensyang

menggambarkan hubungan antar objek di dalam sebuah usecase. Berikut adalah

diagram sekuens yang dirancang pada penelitian ini:

1. Nama : Sequence Diagram Laporan

ID : SQ-01

Gambar 4. 16 Sequence DiagramLapor

2. Nama : Sequence Diagram Track Lapor

ID : SQ-02

107
 Gambar 4. 17 Sequence Diagram Track Laporan

3. Nama : Sequence Diagram Login Admin

ID : SQ-03

Gambar 4. 18 Sequence Diagram Login Admin

108
 4. Nama : Sequence Diagram Validasi Laporan

ID : SQ-04-1

Gambar 4. 19 Sequence DiagramValidasi Laporan

5. Nama : Sequence Diagram Manajemen Laporan – Tolak Laporan

ID : SQ-04-2

Gambar 4. 20 Sequence Diagram Manajemen Laporan – Tolak Laporan

109
 6. Nama : Sequence Diagram Manajemen Laporan – Cetak Laporan

ID : SQ-04-3

Gambar 4. 21 Sequence Diagram Manajemen Laporan – Cetak Laporan

110
7. Nama : Sequence DiagramKlarifikasi Laporan

ID : SQ-05-1

Gambar 4. 22 Sequence DiagramKlarifikasi Laporan

8. Nama : Sequence DiagramKlarifikasi Laporan – Tolak Laporan

ID : SQ-05-2

Gambar 4. 23 Sequence DiagramKlarifikasi Laporan – Tolak Laporan

111
9. Nama : Sequence DiagramKlarifikasi Laporan – Cetak Laporan

ID : SQ-05-3

Gambar 4. 24 Sequence DiagramKlarifikasi Laporan – Cetak Laporan

10. Nama: Sequence DiagramSelesaikan Laporan

ID : SQ-06-1

Gambar 4. 25 Sequence DiagramSelesaikan Laporan

112
 11. Nama: Sequence Diagram Selesaikan Laporan – Tolak Laporan

ID : SQ-06-2

Gambar 4. 26 Sequence DiagramSelesaikan Laporan – Tolak Laporan

12. Nama: Sequence Diagram Selesaikan Laporan – Cetak Laporan

ID : SQ-06-3

Gambar 4. 27 Sequence DiagramSelesaikan Laporan – Cetak Laporan

113
 13. Nama: Sequence Diagram Logout

ID : SQ-07

Gambar 4. 28 Sequence Diagram Logout

4.4.1 Implementasi Sistem

Setelah selesai merancang sistem, maka yang selanjutnya harus

dilakukan adalah mengimplementasikan hasil dari rancangan tersebut. Dalam

melakukan implementasi Sistem Informasi Layanan Pengaduan Pelanggaran

Peraturan Daerah, peneliti dibantu oleh software XAMPP versi 3.2.4 yang di

dalamnyameliputi Apache versi 2.4.39 sebagaiweb server dan MariaDB sebagai

database server. Bahasa pemrograman yang peneliti pergunakan dalam

membangun sistem adalah bahasa pemrograman PHP versi 7.3 dan aplikasi

Sublime Text versi 3.2.2 sebagai text dan source code editor dalam membantu

proses pemrograman. Peneliti juga menggunakan Microsoft Visio 2013 untuk

merancang UML dan desain interface.

Spesifikasi komputer dimana Sistem Informasi Layanan Pengaduan

Pelanggaran Peraturan Daerah adalah seperti yang diuraikan di bawah ini:

114
 1. Processor : Intel Core i5-M520

2. RAM : 8GB

3. VRAM : 1GB

4. Harddisk : 300GB

5. Operating System : Windows 8.1

4.4.2 Interface Sistem Informasi Inventory Barang

Interface atau tampilan akhir dari sistem informasi layanan pengaduan

pelanggaran peraturan daerah yang sudah selesai dibangun dengan berbasis website

yang dibagi menjadi dua yaitu interface untuk semua pelapor, dan admin. Berikut

adalah hasil akhir untuk interfaceSistem Informasi Layanan Pengaduan

Pelanggaran Peraturan Daerah:

1. Interface Untuk Pelapor

a. Halaman Awal Sistem (Home)

115
Gambar 4. 29 Tampilan Halaman Awal Sistem (Home)

116
b. Halaman Lapor

Gambar 4. 30 Tampilan Halaman Lapor

117
 c. Halaman Track Laporan

Gambar 4. 31 Tampilan Halaman Track Laporan

2. Interface Untuk Admin

a. Halaman Login Admin

Gambar 4. 32 Tampilan Halaman Login Admin

118
b. Halaman Tambah Dashboard Admin

Gambar 4. 33 Tampilan Halaman Dashboard Admin

119
c. Halaman Data Laporan

Gambar 4. 34 Tampilan Halaman Edit Data Pemasok

120
 d. Halaman Detail Data Laporan

Gambar 4. 35 Tampilan Halaman Detail Data Laporan

121
 e. Halaman Data Laporan yang Sudah Divalidasi

Gambar 4. 36 Tampilan Halaman Data Laporan yang Sudah Divalidasi

122
 f. Halaman Data Laporan yang Sudah Diklarifikasi

Gambar 4. 37 Tampilan Halaman Data Laporan yang Sudah Diklarifikasi

123
 g. Halaman Data Laporan yang Sudah Selesai

Gambar 4. 38 Tampilan Halaman Data Laporan yang Sudah Selesai

124
 h. Halaman Tambah Data Laporan yang Ditolak

Gambar 4. 39 Tampilan Halaman Data Laporan yang Ditolak

125
 i. Halaman Cetak Laporan

Gambar 4. 40 Tampilan Halaman Cetak Laporan

4.3.3. Tahap Pengujian Sistem

a. Black Box Testing

Pengujian pada Sistem Informasi Layanan Pengaduan Pelanggaran

Peraturan Daerah pada Satpol PP Kota Tangerang Selatan menggunakan pengujian

kotak hitam untuk menguji sistem dari segi fungsinya. Penguji menguji setiap use

case yang ada untuk mengukur hasil keluaran yang didapat apakah sudah sesuai

atau belum dengan yang diharapkan.

1. Pengujian Use Case Laporan

126
 Tabel 4. 15 Pengujian Use Case Login

No. Prosedur Pengujian Hasil Yang Diharapkan Hasil

1. Isi form laporan Dapat mengisi form laporan Sesuai
sesuai dengan data-data yang
dibutuhkan
2. Klik tombol Laporkan Menyetor laporan ke dalam Sesuai
sistem dengan sukses
3. Klik tombol Tekan untuk Kembali ke halaman awal Sesuai
kembali setelah sukses menginput
laporan

2. Pengujian Use Case Track Laporan

Tabel 4. 16 Pengujian Use Case Track Laporan

No. Prosedur Pengujian Hasil Yang Diharapkan Hasil

1. Klik Track Laporan Menampilkan halaman track Sesuai
laporan yang berisi formtrack
laporan
2. Isi form track laporan Dapat mengisi form track Sesuai
laporan sesuai dengan data-
data yang dibutuhkan
3. Klik Track Laporan Menampilkan status laporan Sesuai
sesuai dengan data yang
diinput dalam form

3. Pengujian Use Case Login Admin

Tabel 4. 17 Pengujian Use Case Login Admin

No. Prosedur Pengujian Hasil Yang Diharapkan Hasil

1. Klik Login Admin Menunjukkan halaman login Sesuai
untuk admin masuk ke dalam
dashboard admin
2. Isi form login Dapat mengisi form login Sesuai
sesuai dengan data yang
dibutuhkan.
3 Klik Remember Me Sistem dapat mengingat Sesuai
username dan password yang

127
 diinput secara otomatis sesuai
dengan komputer yang
digunakan.
4 Klik Login User dapat masuk ke halaman Sesuai
dashboard admin

4. Pengujian Use Case Manajemen Data Laporan

Tabel 4. 18 Pengujian Use Case Manajemen Data Laporan

No. Prosedur Pengujian Hasil Yang Diharapkan Hasil

1. Klik Data Laporan Menampilkan daftar data Sesuai
laporan
2. Klik Detail Menampilkan halaman yang Sesuai
berisi detail data laporan yang
dipilih
3. Klik tombol Cetak Mengirim dokumen data Sesuai
laporan ke komputer
pengguna.
4. Klik tombol Kontak WA Mengarahkan pengguna ke Sesuai
website whatsapp web untuk
login ke akun whatsappnya
untuk menghubungi pelapor
5. Klik tombol Reject Menolak laporan dan Sesuai
mengganti status laporan yang
dipilih menjadi tidak valid
6. Klik tombol Validasi Memvalidasi laporan yang Sesuai
dipilih dan mengganti status
laporan yang dipilih menjadi
valid

5. Pengujian Use Case Pengujian Use Case KlarifikasiData Laporan

Tabel 4. 19 Pengujian Use CaseKlarifikasiData Laporan

No. Prosedur Pengujian Hasil Yang Diharapkan Hasil

1. Klik Data Laporan Menampilkan daftar data Sesuai
laporan

128
2. Klik Detail Menampilkan halaman yang Sesuai
berisi detail data laporan yang
dipilih
3. Klik tombol Cetak Mengirim dokumen data Sesuai
laporan ke komputer
pengguna.
4. Klik tombol Kontak WA Mengarahkan pengguna ke Sesuai
website whatsapp web untuk
login ke akun whatsappnya
untuk menghubungi pelapor
5. Klik tombol Reject Menolak laporan dan Sesuai
mengganti status laporan yang
dipilih menjadi tidak valid
6. Klik tombol Klarifikasi Mengklarifikasi laporan yang Sesuai
dipilih dan mengganti status
laporan yang dipilih menjadi
klarifikasi

6. Pengujian Use Case Pengujian Use Case SelesaikanData Laporan

Tabel 4. 20 Pengujian Use CaseSelesaikanData Laporan

No. Prosedur Pengujian Hasil Yang Diharapkan Hasil

1. Klik Data Laporan Menampilkan daftar data Sesuai
laporan
2. Klik Detail Menampilkan halaman yang Sesuai
berisi detail data laporan yang
dipilih
3. Klik tombol Cetak Mengirim dokumen data Sesuai
laporan ke komputer
pengguna.
4. Klik tombol Kontak WA Mengarahkan pengguna ke Sesuai
website whatsapp web untuk
login ke akun whatsappnya
untuk menghubungi pelapor
5. Klik tombol Reject Menolak laporan dan Sesuai
mengganti status laporan yang
dipilih menjadi tidak valid

129
 6. Klik tombol Selesaikan Menyelesaikan pelayanan Sesuai
laporan yang dipilih dan
mengganti status laporan yang
dipilih menjadi selesai

7. Pengujian Use Case Logout

Tabel 4. 21 Pengujian Use Case Logout

No. Prosedur Pengujian Hasil Yang Diharapkan Hasil

1. Klik Admin kemudian klik Mengeluarkan user dari Sesuai
Keluar sistem lalu menampilkan
halaman login

b. WhiteBox Testing
Setelah pembuatan aplikasi selesai maka aplikasi diuji menggunakan

white box testing, sedangkan teknik yang digunakan dalam pengujian white box

testing ini yaitu path testing. Tahap pertama dalam pengujian adalah dengan

menggambarkan flowgraph. Berikut adalah flowgraph sistem yang dibangun.

130
 Gambar 4. 41 Flowgraph Sistem

Sedangkan tabel dibawah ini menjelaskan keterangan mengenai setiap

node di flowgraph sistem diatas:

Tabel 4. 22 Keterangan node pada sistem

No Keterangan

1. Halaman utama sistem

2. Halaman lapor

3. Formpada halaman lapor

4. Halaman track laporan

5. Cetak laporan

6. Halaman login admin

131
 7. Login admin

8. Halaman daftar laporan

9. Validasi laporan

10. Proses validasi

11. Laporan tervalidasi

12. Selesai

Setelah flowgraph dibuat dan setiap node dirincikan dalam tabel, maka

tahap selanjutnya adalah menghitung cyclomatic complexity seperti yang

ditunjukkan dalam rumusan di bawah ini:

Diketahui E = 11 dan N = 10

Ditanya : V(G) = ?

Jawab : V(G) = E–N+2

= 11 – 10 + 2
=3

Setelah perhitungan cyclomatic complexity dilakukan dan diketahui

hasilnya, selanjutnya yang harus dilakukan adalah membuat independent path.

Independent path merupakan penghubung node awal dan node akhir yang berupa

suatu jalur program. Dibawah ini adalah tabel independent path.

Tabel 4. 23 Independent Path

No Independent Path

1. 1-2-3-12

132
 2. 1-4-5-12

3. 1-6-7-8-9-10-11-12

Berdasarkan independent path yang telah dibuat, dapat diketahui

bahwa semua node dari awal sampai akhir telah terhubung dan setiap edge telah

dilalui. Selanjutnya, setelah mendapatkan setiap jalur, independent path lalu

diimplementasikan ke dalam suatu test case dengan mengganti angka pada setiap

node yang ada. Pada implementasi test case ini, semua alur dieksekusi dan

dilakukan uji kasus,sehingga hasil pengujian apakah sistem berjalan sesuai yang

diharapkan atau tidak dapat diketahui. Tabel dibawah ini menunjukkan hasil

pengujian test case yang telah dilakukan.

Tabel 4. 24 Test Case

No Independent Path Hasil

1. Menampilkan halaman utama sistem, menampilkan halaman Sesuai

lapor, mengisi form pada halaman lapor, selesai

2. Menampilkan halaman utama sistem, membuka halaman track Sesuai

laporan, mencetak laporan, selesai

3. Menampilkan halaman utama sistem, membuka halaman login Sesuai

admin, login sebagai admin, membuka halaman daftar laporan,

memvalidasi laporan, memroses validasi laporan, laporan

tervalidasi, selesai

133
134
 BAB V

PENUTUP

5.1. Kesimpulan

Dengan mempelajari hasil dan pembahasan pada bab sebelumnya maka

peneliti menyimpulkan beberapa hal, yaitu Sistem Informasi Layanan Pengaduan

Pelanggaran Peraturan Daerah yang dibangun dapat membantu Satpol PP Kota

Tangerang Selatan menunjang aktivitas pelaporan pelanggaran peraturan daerah,

dan penindakannya, serta dapat membantu masyarakat sebagai pelapor dalam

proses melaporkan terjadinya pelanggaran Peraturan Daerah di sekitar lingkungan

mereka. Sistem Informasi Layanan Pengaduan Pelanggaran Peraturan Daerah dapat

menyajikan informasi laporan pelanggaran Peraturan Daerah yang dilaporkan oleh

masyarakat dengan cepat sesuai dengan kebutuhan organisasi dan kebutuhan

masyarakat sebagai pelapor, dengan demikian masalah lamanya waktu dalam

memroses pelaporan pelanggaran Peraturan Daerah yang ditemukan hingga

dilakukan penindakan dapat dikurangi.Sistem Informasi Layanan Pengaduan

Pelanggaran Peraturan Daerah berbasis web dan dibangun memanfaatkan bahasa

pemrograman PHP agar lebih mudah diakses dari berbagai macam platform. Untuk

mengakses sistem, yang pengguna butuhkan hanyalah browser saja, dan

ditambahkan dengan fitur terintegrasi dengan komunikasi seluler melalui whatsapp

sehingga baik pelapor dan admin sistem dapat saling mengetahui jika ada progress

dalam pelayanan laporan pelanggaran Peraturan Daerah. Penggunaan sistem

berbasis web meringankan pengguna mengakses sistem dimanapun dan dapat

melakukan seluruh proses di dalam sistem dimana saja, sehingga lebih efektif dan

efisien dari segi organisasi karena tidak harus melakukan semua kegiatan dan

menyimpan semua dokumen di kantor.

5.2. Saran

Penelitian ini dapat dikembangkan agar menjadi penelitian yang lebih

baik maka peneliti menyarankan beberapa hal sebagai berikut:

1. Sistem Informasi Layanan Pengaduan Pelanggaran Peraturan

Daerah ini menjadi berbasis mobile yang mempermudah

pengguna untuk mengakses sistem dari perangkat smartphone.

2. Pengembangan Sistem Informasi Layanan Pengaduan

Pelanggaran Peraturan Daerah ini dapat dikembangankan

menjadi aplikasi pengawasan lingkungan dan penindakan cepat

tanggap.

3. Menambahkan fitur-fitur baru yang memudahkan pengguna

memakai Sistem Informasi Layanan Pengaduan Pelanggaran

Peraturan Daerah ini.

 DAFTAR PUSTAKA

Abdulloh, R. (2016). Easy Web Programming. Jakarta: Elex Media Komputindo.

Biaggiola, M., Ricca, F., Stocco, A., & Tonella, P. (2019). Diversity-Based Web

Test Generation. Proceedings of 27th ACM Joint European Software

Engineering Conference and Symposium on the Foundations of Software

Engineering (ESEC/FSE ’19), (hal. 142-153). Talinn.

Connolly, T., & Begg, C. (2010). Database Systems: A Practical Approach to

Design, Implementation, and Management (5th ed.). Boston: Pearson

Education.

Daqiqil, I. (2011). Framework Codeigniter: Sebuah Panduan dan Best Practice.

Pekanbaru: http://koder.web.id/buku-codeigniter-gratis/.

Fard, A. M., Mirzagheei, M., & Mesbah, A. (2014). Leveraging Existing Tests in

Automated Test Generation for Web Applications. IEEE/ACM

International Conference on Automated Software Engineering (ASE), (hal.

67-78). San Diego.

Gelinas, U., & Dull, B. R. (2012). Accounting Information Systems (9th ed.).

Boston: South Western Cengage Learning.

Hakiki, N. (2018). Rancang Bangun Sistem Pelaporan Data Statistik Desa pada

Kecamatan Pallangga Berbasis Web. Makassar: Universitas Islam Negeri

Alauddin.

Hakim, L. (2010). Membangun Web Berbasis PHP dengan Framework

Codeigniter. Yogyakarta: Lokomedia.

Hariyanto, B. (2004). Sistem Manajemen Basis Data. Bandung: Informatika.

Hidayat, R. (2010). Cara Praktis Membangun Website Gratis. Jakarta: PT Elex

Media Komputindo.

Hutahean, J. (2015). Konsep Sistem Informasi. Yogyakarta: Deepublish.

Jogiyanto, H. M. (2005). Analisa dan Desain Sistem Informasi: Pendekatan

Terstruktur Teori dan Praktik Aplikasi Bisnis. Yogyakarta: ANDI.

Kadir, A. (2002). Pengenalan Sistem Informasi. Yogyakarta: ANDI.

Kendall, K. E., & Kendall, J. E. (2003). Analisis dan Perancangan Sistem.

Jakarta: Prehallindo.

Kendall, K. E., & Kendall, J. E. (2010). Analisis dan Perancangan Sistem.

Jakarta: Indeks.

Khaerul, A. J. (2017). Rancang Bangun Sistem Pelaporan Mitigasi Bencana

Berbasis Web Dengan Metode Model View Controller. Makassar:

Universitas Hasanuddin.
Ladjamudin, A.-B. (2005). Analisis dan Desain Sistem Informasi. Yogyakarta:

Graha Ilmu.

Lin, J. W., Wang, F., & Chu, P. (2017). Using Semantic Similarity in Crawling-

Based Web Application Testing. 10th IEEE International Conference on

Software Testing, Verification and Validation (hal. 138-148). Tokyo: IEEE

Computer Society.

Mesbah, A. (2016). Software Analysis for the Web:Achievements and Prospects.

2016 IEEE 23rd International Conference on Software Analysis,

Evolution, and Reengineering (SANER), (hal. 91-103).

Muladi. (2006). Lembaga Pidana Bersyarat. Bandung: Alumni.

Nidhra, S., & Dondeti, J. (2012). Black Box and White Box Testing Techniques -

A Literature Review. International Journal of Embedded Systems and

Applications, 29-50.

Nugroho, B. (2013). Dasar Pemrograman Web PHP - MySQL dengan

Dreamweaver. Yogyakarta: Gava Media.

Pressman, R. S. (2002). Rekayasa Perangkat Lunak. Yogyakarta: ANDI.

Pressman, R. S. (2010). Software Engineering: A Practitioner's Approach. New

York: McGraw-Hill, Ed.

Pressman, R. S., & Maxim, B. R. (2014). Software Engineering: A Practitioner's

Approach (8th ed.). New York: McGraw-Hill Education.

Quadri, S., & Farooq, S. U. (2010). Software Testing - Goals, Principles, and

Limitations. International Journal of Computer Applications, 7-10.

Rahmawati, R. (2018). Sistem Pelaporan Kinerja Pegawai Berbasis Web pada

Kementerian Agama Kabupaten Luwu Utara. Makassar: Universitas Islam

Negeri Alauddin.

Rosa, A. S., & Salahuddin. (2011). Modul Pembelajaran Rekayasa Perangkat

Lunak (Terstruktur dan Berorientasi Objek). Bandung: Modula.

Saputra, A. (2011). Trik dan Solusi Jitu Pemrograman PHP. Jakarta: PT Elex

Media Komputindo.

Satzinger, J. W., Jackson, R. B., & Burd, S. D. (2011). System Analysis and

Design in a Changing World (6th ed.). Boston: Chengage Learning.

Stair, R. M., & Reynolds, G. W. (2012). Fundamentals of Information Systems

(With Access Code). Boston: Cengage Learning.

Sudianto. (2018). Rancang Bangun Sistem Administrasi Pelaporan Masyarakat

pada Kantor Polisi Sektor Bontoala Kota Makassar. Makassar:

Universitas Islam Negeri Alauddin.

Sugiarti, Y. (2018). Dasar-Dasar Pemrograman Java Netbeans: Database, UML,

dan Interface. Bandung: PT Remaja Rosdakarya.

Sutabri, T. (2012). Analisis Sistem Informasi. Yogyakarta: ANDI.

Wahono. (2007). Bahasa Indonesia untuk SMP/MTs Kelas VIII. Bandar

Lampung: Gita Perdana.

LAMPIRAN
 LAMPIRAN 1
HASIL WAWANCARA
Wawancara 1

Pewawancara : Aldino Widya Kurniawan

Narasumber : Muksin

Jabatan Narasumber : Kepala Kantor Satpol PP Kota Tangerang Selatan

Hari / Tanggal : Selasa / 9 Juni 2020

1. Assalamu’alaikum Warahmatullahi Wabarakatuh, selamat pagi pak

bagaimana kabarnya?

Jawaban :

Wa’alaikumsalam, Alhamdulillah baik.

2. Saya ingin bertanya, mengenai proses pencatatan laporan pelanggaran

peraturan daerah dari masyarakat itu seperti apa ya pak?

Jawaban :

Untuk pencatatan laporan pelanggaran peraturan daerah itu akan didata terlebih

dulu dengan cara menulis form yang disediakan oleh kantor secara tertulis,

baru nanti akan dikelompokkan sesuai jenis pelanggarannya.

3. Nah dengan proses yang masih menggunakan form tertulis tersebut itu

kendala atau masalah yang ditemukan seperti apa pak?

Jawaban:

Belum lama ini sih terjadi kehilangan banyak dokumen form-form lama yang

ingin kita arsipkan dengan dipindahkan ke komputer dan untuk kehilangan

form itu sebelumnya juga pernah terjadi sebelumnya tapi sudah cukup lama.
4. Selain kehilangan form mungkin ada masalah atau kendala lain terkait

pencatatan menggunakan form ini pak?

Jawaban:

Kalau untuk selain kehilangan pernah terjadi kerusakan form yang kita

antarkan ke satuan yang bertugas di lapangan, jadi malah tidak bisa kita

arsipkan ke komputer karena formnya sendiri sudah rusak.

5. Untuk kerusakan atau kehilangan data laporan pelanggaran peraturan

daerah itu apa hanya dari faktor-faktor yang tadi bapak sebutkan saja?

Apakah tidak ada faktor lainnya pak?

Jawaban:

Kebanyakan sih karena dua faktor tersebut, karena dua faktor itu saja sudah

bikin data yang masuk ke kantor jadi tidak akurat.

6. Berarti kalau terjadi kehilangan form atau formnya rusak harus

dilakukan pencatatan ulang ya pak?

Jawaban:

Iya betul sekali, nanti akan dilakukan pencatatan dan pengecekan lagi ke

lapangan dengan mengecek sejarah pelanggaran yang ada melalui warga atau

saksi kasus yang sebelumnya terjadi kalau masih ada orang yang bisa dimintai

keterangan untuk mengganti data yang salah tadi.

7. Untuk penyimpanan di komputernya sendiri itu menggunakan apa pak

aplikasinya?

Jawaban:
 Kami saat ini masih menggunakan Excel yang nanti disimpan filenya dalam

komputer tersebut.

8. Berarti jika prosesnya masih manual seperti itu masalah yang terjadi

hampir mirip dengan proses pencacatan barang masuk dan keluar tadi

yaitu kesalahan saat pencacatan dan masalah pada kertasnya jika rusak,

hilang, atau tulisannya tidak jelas?

Jawaban:

Kurang lebih masalahnya sama sih ya jadi nanti di Excel datanya dapat salah

juga karena kesalahan-kesalahan tadi.

9. Kalau sudah terjadi kesalahan data seperti itu akibatnya apa ya pak?

Jawaban:

Karena salahnya data itu kita jadi salah informasi soal jumlah barang yang ada

digudang, jadi pernah terjadi kesalahan pesanan barang yang seharusnya kami

pesan 100 unit tapi karena datanya salah jadi kami pesan kurang atau lebih.

10. Untuk pemesanan yang lebih tersebut akibatnya apa pak bagi

perusahaan?

Jawaban:

Yang pasti sih kerugian ya karena bisa jadi barang yang berlebih itu tidak

kepakai atau sudah tidak fresh lagi dan ujung-ujungnya akan dibuang.

11. Kalau akibat dari kurangnya pemesanan ke pemasok tersebut seperti apa

pak yang pernah dialami?

Jawaban:
 Akibat terburuknya itu pernah terjadi keterlambatan produksi sampai-sampai

pelanggannya membatalkan pesanan dan tidak mau melunasi pembayarannya

karena pesanannya kurang saat sudah deadline.

12. Untuk proses pencetakan laporan keluar masuk barang atau stok barang

itu bagaimana pak prosesnya?

Jawaban:

Nanti dibuat manual lewat Excel tapi ada template-nya, jadi nanti data yang

diperlukan dipindahkan ke template tadi dan disusun kemudian baru dicetak.

13. Jika prosesnya seperti itu berarti jika ada data yang salah akibat

permasalahan tadi yang bapak ceritakan maka laporannya juga bisa

salah ya pak pas sudah sampai kepada orang yang membutuhkannya?

Jawaban:

Iya bisa salah dan memang pernah kejadian sehingga itu tadi bisa berakibat

kurangnya pesanan yang disediakan untuk pelanggan kami.

14. Kira kira waktu yang diperlukan untuk melakukan proses pengecekan

stok dan pencatatan keluar masuk barang sampai dipindahkan ke dalam

Excel tadi berapa ya?

Jawaban:

Untuk proses pengecekan sampai penyimpanan ke komputer itu kira-kira

memakan waktu 2 jam kalau untuk proses pencatatan barang biasanya

tergantung dari banyaknya barang yang keluar masuk, kalau banyak ya lama

kalau sedikit ya sebentar jika disuruh mengira berapa waktunya mungkin

sekitar 2 sampai 3 jam lebih.

15. Kalau untuk pembuatan laporannya sendiri memakan waktu kira-kira

berapa jam pak?

Jawaban:

Untuk penyusunan laporan sekitar 1 jam bisa kurang bisa lebih tergantung

banyaknya yang dibuat juga.

16. Oke baik pak mungkin itu saja pertanyaan dari saya, terima kasih sekali

pak atas waktunya dan jawaban-jawaban yang sudah bapak berikan.

Jawaban:

Iya sama sama juga semoga sukses ya penelitiannya dan semoga hasilnya

bagus juga nanti.

LAMPIRAN 2

SOURCE CODE
 dashboard.php
<?php $this->load->view('partial/head'); ?>

<body class="skin-default fixed-layout">

<!-- Preloader - style you can find in spinners.css -->

<div class="preloader">
<div class="loader">
<div class="loader__figure"></div>
<p class="loader__label">Silapperda Tangsel</p>
</div>
</div>

<div id="main-wrapper">

<?php $this->load->view('partial/header'); ?>

<?php $this->load->view('partial/sidebar'); ?>

<div class="page-wrapper">

<div class="container-fluid">
<div class="row page-titles">
<div class="col-md-5 align-self-center">
<h4 class="text-themecolor">SILAPPERDA KOTA TANGERANG
SELATAN</h4>
</div>
<div class="col-md-7 align-self-center text-right">
<div class="d-flex justify-content-end align-items-center">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="<?php echo base_url() ?>"
target="_blank">Ke web utama</a></li>
<li class="breadcrumb-item active"></li>
</ol>
</div>
</div>
</div>

<?php $this->load->view($template); ?>

<div class="right-sidebar">
<div class="slimscrollright">
<div class="rpanel-title"> Service Panel <span><i class="ti-
close right-side-toggle"></i></span></div>
<div class="r-panel-body">
<ul id="themecolors" class="m-t-20">
<li><b>With Light sidebar</b></li>
<li><a href="javascript:void(0)" data-skin="skin-default"
class="default-theme">1</a></li>
<li><a href="javascript:void(0)" data-skin="skin-green"
class="green-theme">2</a></li>
<li><a href="javascript:void(0)" data-skin="skin-red"
class="red-theme">3</a></li>
<li><a href="javascript:void(0)" data-skin="skin-blue"
class="blue-theme">4</a></li>
<li><a href="javascript:void(0)" data-skin="skin-purple"
class="purple-theme">5</a></li>
<li><a href="javascript:void(0)" data-skin="skin-megna"
class="megna-theme working">6</a></li>
<li class="d-block m-t-30"><b>With Dark sidebar</b></li>
<li><a href="javascript:void(0)" data-skin="skin-default-dark"
class="default-dark-theme ">7</a></li>
<li><a href="javascript:void(0)" data-skin="skin-green-dark"
class="green-dark-theme">8</a></li>
<li><a href="javascript:void(0)" data-skin="skin-red-dark"
class="red-dark-theme">9</a></li>
<li><a href="javascript:void(0)" data-skin="skin-blue-dark"
class="blue-dark-theme">10</a></li>
<li><a href="javascript:void(0)" data-skin="skin-purple-dark"
class="purple-dark-theme">11</a></li>
<li><a href="javascript:void(0)" data-skin="skin-megna-dark"
class="megna-dark-theme ">12</a></li>
</ul>
</div>
</div>
</div>

<footer class="footer">
Copyright &copy;<script>document.write(new
Date().getFullYear());</script> All rights reserved | Seksi
penyelidikan dan penyidikan , Mohamad Muksin
</footer>
</div>

<script src="<?php echo base_url()

?>assets/node_modules/jquery/jquery-3.2.1.min.js"></script>
<script src="<?php echo base_url()
?>assets/node_modules/popper/popper.min.js"></script>
<script src="<?php echo base_url()
?>assets/node_modules/bootstrap/dist/js/bootstrap.min.js"></scr
ipt>
<script src="<?php echo base_url() ?>dist/js/perfect-
scrollbar.jquery.min.js"></script>
<script src="<?php echo base_url()
?>dist/js/waves.js"></script>
<script src="<?php echo base_url()
?>dist/js/sidebarmenu.js"></script>
<script src="<?php echo base_url()
?>assets/node_modules/sticky-kit-master/dist/sticky-
kit.min.js"></script>
<script src="<?php echo base_url()
?>assets/node_modules/sparkline/jquery.sparkline.min.js"></scri
pt>
<script src="<?php echo base_url()
?>dist/js/custom.min.js"></script>
 <script src="<?php echo base_url()
?>assets/node_modules/sweetalert2/dist/sweetalert2.all.min.js">
</script>
<script src="<?php echo base_url()
?>assets/node_modules/sweetalert2/sweet-
alert.init.js"></script>
<script src="<?php echo base_url()
?>assets/node_modules/bootstrap-select/bootstrap-select.min.js"
type="text/javascript"></script>

<script>

var url = "<?php echo base_url() ?>";

function formatRupiah(angka, prefix) {

var number_string = angka.replace(/[^,\d]/g, "").toString(),
split = number_string.split(","),
sisa = split[0].length % 3,
rupiah = split[0].substr(0, sisa),
ribuan = split[0].substr(sisa).match(/\d{3}/gi);

if (ribuan) {
separator = sisa ? "." : "";
rupiah += separator + ribuan.join(".");
}

rupiah = split[1] != undefined ? rupiah + "," + split[1] :

rupiah;
return prefix == undefined ? rupiah : rupiah ? "Rp. " +
rupiah : "";
}

</script>
<?php
if(isset($js_under)){
$this->load->view($js_under);
}
?>
</body>

</html>
 frontend.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>SisPerda - Tangerang Selatan</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">

<link
href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,
300,400,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="<?php echo base_url()
?>front/css/open-iconic-bootstrap.min.css">
<link rel="stylesheet" href="<?php echo base_url()
?>front/css/animate.css">

<link rel="stylesheet" href="<?php echo base_url()

?>front/css/owl.carousel.min.css">
<link rel="stylesheet" href="<?php echo base_url()
?>front/css/owl.theme.default.min.css">
<link rel="stylesheet" href="<?php echo base_url()
?>front/css/magnific-popup.css">

<link rel="stylesheet" href="<?php echo base_url()

?>front/css/aos.css">

<link rel="stylesheet" href="<?php echo base_url()

?>front/css/ionicons.min.css">

<link rel="stylesheet" href="<?php echo base_url()

?>front/css/flaticon.css">
<link rel="stylesheet" href="<?php echo base_url()
?>front/css/icomoon.css">
<link rel="stylesheet" href="<?php echo base_url()
?>front/css/style.css">
</head>
<body data-spy="scroll" data-target=".site-navbar-target"
data-offset="300">

<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar

bg-dark ftco-navbar-light site-navbar-target" id="ftco-
navbar">
<div class="container">
<a class="navbar-brand" href="<?php echo base_url()
?>front/index.html"><img src="<?php echo base_url()
?>img/logotangsel.svg" style='height:50px'><br />
SILAPPERDA<span>Tangsel</span></a>
<button class="navbar-toggler js-fh5co-nav-toggle fh5co-nav-
toggle" type="button" data-toggle="collapse" data-
target="#ftco-nav" aria-controls="ftco-nav" aria-
expanded="false" aria-label="Toggle navigation">
<span class="oi oi-menu"></span> Menu
</button>

<div class="collapse navbar-collapse" id="ftco-nav">

<ul class="navbar-nav nav ml-auto">
<li class="nav-item"><a href="<?php echo base_url() ?>#home-
section" class="nav-link"><span>Home</span></a></li>
<li class="nav-item"><a href="<?php echo base_url() ?>lapor"
class="nav-link"><span>Lapor </span></a></li>
<li class="nav-item"><a href="<?php echo base_url()
?>lapor/track" class="nav-link"><span>Track
Laporan</span></a></li>
<li class="nav-item"><a href="<?php echo base_url() ?>login"
class="nav-link"><span>Login Admin</span></a></li>
</ul>
</div>
 </div>
</nav>
<section id="home-section" class="hero">
<div class="home-slider js-fullheight owl-carousel">
<div class="slider-item js-fullheight">
<div class="overlay"></div>
<div class="container-fluid p-0">
<div class="row d-md-flex no-gutters slider-text js-
fullheight align-items-center justify-content-end" data-
scrollax-parent="true">
<div class="one-third order-md-last img js-fullheight"
style="background-image:url('<?php echo base_url()
?>images/bg1.jpeg')">
<div class="overlay"></div>
</div>
<div class="one-forth d-flex js-fullheight align-
items-center ftco-animate" data-scrollax=" properties: {
translateY: '70%' }">
<div class="text">
<h1 class="mb-4 mt-3">SILAPPERDA TANGERANG
SELATAN </h1>
<p> Sistem
Informasi Layanan Pengaduan Pelanggaran Peraturan Daerah Kota
Tangerang Selatan </p>

<p><a href="<?php echo base_url() ?>lapor/#"

class="btn btn-primary px-5 py-3 mt-3"
style="background:#53A5A7">LAPOR SATPOL PP <br /> Pelanggaran
Peraturan Daerah Kota Tangerang Selatan</a></p>

<p
class="text-center" style="margin-top:-30px;"><a href="<?php
echo base_url() ?>aplikasi.apk" class="btn px-5 py-3 mt-3"
style="background:gold">Download APK</a></p>
</div>
</div>
</div>
</div>
</div>

<div class="slider-item js-fullheight">

<div class="overlay"></div>
<div class="container-fluid p-0">
<div class="row d-flex no-gutters slider-text js-fullheight
align-items-center justify-content-end" data-scrollax-
parent="true">
<div class="one-third order-md-last img js-fullheight"
style="background-
image:url(https://cdns.klimg.com/merdeka.com/i/w/news/2018/05/
14/976084/670x335/kpk-periksa-bangunan-balai-kota-
tangsel.jpg)">
<div class="overlay"></div>
</div>
<div class="one-forth d-flex js-fullheight align-
items-center ftco-animate" data-scrollax=" properties: {
translateY: '70%' }">
 <div class="text">
<h1 class="mb-4 mt-3">SILAPPERDA TANGERANG SELATAN </h1>
<p> Sistem Informasi Layanan Pengaduan Pelanggaran Peraturan
Daerah Kota Tangerang Selatan </p>

<p><a href="<?php echo base_url() ?>lapor/#"

class="btn btn-primary px-5 py-3 mt-3"
style="background:#53A5A7">LAPOR SATPOL PP <br /> Pelanggaran
Peraturan Daerah Kota Tangerang Selatan</a></p>
<p
class="text-center" style="margin-top:-30px;"><a href="<?php
echo base_url() ?>aplikasi.apk" class="btn px-5 py-3 mt-3"
style="background:gold">Download APK</a></p>

</div>
</div>
</div>
</div>
</div>
</div>
</section>

<section class="ftco-counter img ftco-section ftco-no-

pt ftco-no-pb" id="about-section">
<div class="container">
<div class="row d-flex">
<div class="col-md-6 col-lg-5 d-flex">
<div class="img d-flex align-self-stretch
align-items-center" style="background-
image:url(https://www.tribunpos.com/wp-
content/uploads/2018/12/10-46-06-Walikota-Tangerang-Selatan-
Tangsel-Airin-Rachmi-Diany.jpg.cf_.jpg);">
</div>
</div>
<div class="col-md-6 col-lg-7 pl-lg-5 py-5">
<div class="py-md-5">
<div class="row justify-content-
start pb-3">
<div class="col-md-12 heading-section ftco-
animate">
<span class="subheading">SILAPPERDA</span>
<h2 class="mb-4" style="font-size: 34px; text-
transform: capitalize;">VISI-MISI KOTA TANGERANG SELATAN</h2>
<p> Visi</p>
<p> Terwujudnya Tangsel Kota Cerdas , Berkualitas dan Beradaya
Saing Berbasis Teknologi dan Inovasi. </p>
<br />
<p> Misi </p>
<p>Mengembangkan Sumberdaya manusia yang handal dan berdaya
saing.
Meningkatkan infrastruktur kota yang fungsional.
Menciptakan kota layak huni yang berwawasan lingkungan.
Mengmbangkan Ekonomi kerakyatan berbasis inovasi dan produk
unggulan.
Meningkatkan tata kelola pemerintahan yang baik berbasis
teknologi informasi.</p>
 </div>
</div>
<div class="counter-wrap ftco-animate d-flex mt-md-3">
<div class="text p-4 bg-primary">
<p class="mb-0">
<span class="number" data-number="20">0</span>
<span>Jumlah Laporan Masuk</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

<section class="ftco-section ftco-project bg-light"

id="projects-section">
<div class="container px-md-5">
<div class="row justify-content-center pb-5">
<div class="col-md-12 heading-section text-center ftco-
animate">
<h2 class="mb-4">Galeri Foto</h2>
</div>
</div>
<div class="row">
<div class="col-md-12 testimonial">
<div class="carousel-project owl-carousel">
<div class="item">
<div class="project">
<div class="img">
<img
src="images/tangsel1.jpeg" class="img-fluid" alt="Colorlib
Template">
<div class="text
px-4">
<h3><a
href="#">Work Name</a></h3>
<span>Web
Design</span>
</div>
</div>
</div>
</div>
<div class="item">
<div class="project">
<div class="img">
<img src="images/tangsel2.jpeg" class="img-fluid"
alt="Colorlib Template">
<div class="text
px-4">
<h3><a
href="#">Work Name</a></h3>
<span>Web
Design</span>
</div>
 </div>
</div>
</div>

<div class="item">
<div class="project">
<div class="img">
<img src="images/tangsel3.jpeg" class="img-fluid"
alt="Colorlib Template">
<div class="text px-4">
<h3><a href="#">Work Name</a></h3>
<span>Web Design</span>
</div>
</div>
</div>
</div>

</div>
</div>
</div>
</div>
</section>

<section class="ftco-section">
<div class="container">
<div class="row justify-content-center pb-5">
<div class="col-md-6 heading-section text-center ftco-
animate">
<span class="subheading"></span>
<h2 style='font-size:20px'>SATUAN POLISI PAMONG PRAJA <br />
KOTA TANGERANG SELATAN </h2>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-6 ftco-
animate">
<div class="staff">
<div class="img-wrap d-
flex align-items-stretch">
<div class="img
align-self-stretch" style="background-image:
url(img/logosatpolpp.png);"></div>
</div>
<div class="text d-flex
align-items-center pt-3 text-center">
<div>
<span
class="position mb-4" style='color:black'>SATUAN POLISI PAMONG
PRAJA</span>

</div>
</div>
</div>
</div>
 <div class="col-md-6 col-lg-5 ftco-
animate">
<div class="staff">
<div class="img-wrap d-
flex align-items-stretch">
<div class="img align-
self-stretch" style="background-image:
url(img/ppns.png);"></div>
</div>
<div class="text d-flex
align-items-center pt-3 text-center">
<div>
<span class="position mb-4" style='color:black'>PENYIDIK
PEGAWAI NEGERI SIPIL</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

<footer class="ftco-footer ftco-section">

<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<p>
</p>
</div>
</div>
</div>
</footer>

<div id="ftco-loader" class="show fullscreen"><svg

class="circular" width="48px" height="48px"><circle
class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-
width="4" stroke="#eeeeee"/><circle class="path" cx="24"
cy="24" r="22" fill="none" stroke-width="4" stroke-
miterlimit="10" stroke="#F96D00"/></svg></div>

<script src="<?php echo base_url()

?>front/js/jquery.min.js"></script>
<script src="<?php echo base_url() ?>front/js/jquery-migrate-
3.0.1.min.js"></script>
<script src="<?php echo base_url()
?>front/js/popper.min.js"></script>
<script src="<?php echo base_url()
?>front/js/bootstrap.min.js"></script>
<script src="<?php echo base_url()
?>front/js/jquery.easing.1.3.js"></script>
<script src="<?php echo base_url()
?>front/js/jquery.waypoints.min.js"></script>
<script src="<?php echo base_url()
?>front/js/jquery.stellar.min.js"></script>
 <script src="<?php echo base_url()
?>front/js/owl.carousel.min.js"></script>
<script src="<?php echo base_url() ?>front/js/jquery.magnific-
popup.min.js"></script>
<script src="<?php echo base_url()
?>front/js/aos.js"></script>
<script src="<?php echo base_url()
?>front/js/jquery.animateNumber.min.js"></script>
<script src="<?php echo base_url()
?>front/js/scrollax.min.js"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrj
vy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="<?php echo base_url() ?>front/js/google-
map.js"></script>

<script src="<?php echo base_url()

?>front/js/main.js"></script>

</body>
</html>
 lapor.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>SisPerda - Tangerang Selatan</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">

<link
href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,
300,400,600,700,800,900" rel="stylesheet">

<link rel="stylesheet" href="<?php echo base_url()

?>front/css/open-iconic-bootstrap.min.css">
<link rel="stylesheet" href="<?php echo base_url()
?>front/css/animate.css">

<link rel="stylesheet" href="<?php echo base_url()

?>front/css/owl.carousel.min.css">
<link rel="stylesheet" href="<?php echo base_url()
?>front/css/owl.theme.default.min.css">
<link rel="stylesheet" href="<?php echo base_url()
?>front/css/magnific-popup.css">

<link rel="stylesheet" href="<?php echo base_url()

?>front/css/aos.css">

<link rel="stylesheet" href="<?php echo base_url()

?>front/css/ionicons.min.css">

<link rel="stylesheet" href="<?php echo base_url()

?>front/css/flaticon.css">
<link rel="stylesheet" href="<?php echo base_url()
?>front/css/icomoon.css">
<link rel="stylesheet" href="<?php echo base_url()
?>front/css/style.css">
</head>
<body data-spy="scroll" data-target=".site-navbar-target"
data-offset="300">

<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar

bg-dark ftco-navbar-light site-navbar-target" id="ftco-
navbar">
<div class="container">
<a class="navbar-brand"
href="#">SILAPPERDA<span>Tangsel</span></a>
<button class="navbar-toggler js-fh5co-nav-toggle fh5co-nav-
toggle" type="button" data-toggle="collapse" data-
target="#ftco-nav" aria-controls="ftco-nav" aria-
expanded="false" aria-label="Toggle navigation">
<span class="oi oi-menu"></span> Menu
</button>

<div class="collapse navbar-collapse" id="ftco-nav">

<ul class="navbar-nav nav ml-auto">
<li class="nav-item"><a href="<?php echo base_url() ?>#home-
section" class="nav-link"><span>Home</span></a></li>
<li class="nav-item"><a href="<?php echo base_url()
?>home/lapor" class="nav-link active"><span>Lapor
</span></a></li>
<li class="nav-item"><a href="<?php echo base_url()
?>lapor/track" class="nav-link"><span>Track
Laporan</span></a></li>
<li class="nav-item"><a href="<?php echo base_url() ?>login"
class="nav-link"><span>Login Admin</span></a></li>

</ul>
</div>
</div>
</nav>

<br /><br />

<section class="ftco-section ftco-project bg-light"

id="projects-section">
<div class="container px-md-5">
<div class="row justify-content-center pb-5">
<div class="col-md-12 heading-section text-center ftco-
animate">
<span class="subheading">Laporan</span>
<h2 class="mb-4">Form Lapor Pelanggaran</h2>
<p>Masukkan Data Laporan</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form action="<?php echo base_url() ?>lapor/proses"
method="POST" enctype="multipart/form-data">
<div class="form-group">
<h4> Data Diri </h4>

<input type="text" class="form-control" placeholder="NIK"

name="nik_pelapor">
apabila NIK tidak sesuai dengan data diri, maka laporan tidak
akan divalidasi
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Nama"
name="nama_pelapor">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Tempat
Lahir " name="tempat_lahir">
</div>

<div class="form-group">
Tanggal Lahir
<input type="date" class="form-control" placeholder="Tanggal
Lahir " name="tanggal_lahir">
</div>

<div class="form-group">
<input type="text" class="form-control" placeholder="Jenis
Kelamin " name="jenis_kelamin">
</div>

<div class="form-group">
<input type="text" class="form-control" placeholder="Alamat
(RT , RW , Kelurahan/Desa, Kecamatan) " name="alamat">
</div>

<div class="form-group">
<input type="text" class="form-control"
placeholder="Pekerjaan" name="pekerjaan">
</div>

<div class="form-group">

<label>Foto KTP </label>

<input type="file" name="file_ktp" multiple="multiple"
class="form-control" required="required">

</div>

<div class="form-group">
<input type="text" class="form-control" placeholder="Nomor
HP/Telepon" name="no_hp" required="required">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Nomor WA
(+62)" name="no_wa" required="required">
</div>

<h4> Laporan Pelanggaran Perda </h4>

 <div class="form-group">
Tanggal Kejadian
<input type="date" class="form-control" placeholder="Tanggal
Kejadian" name="tanggal">
</div>

<div class="form-group">
<input type="text" class="form-control" placeholder="Tempat
Kejadian" name="tempat">
</div>

<div class="form-group">
<input type="text" class="form-control" placeholder="Terlapor"
name="terlapor">
</div>

<div class="form-group">
<input type="text" class="form-control" placeholder="korban"
name="korban">
</div>

<div class="form-group">
<input type="text" class="form-control" placeholder="Apa yang
terjadi?" name="apa_terjadi">
</div>

<div class="form-group">
<input type="text" class="form-control" placeholder="Bagaimana
terjadi?" name="bagaimana">
</div>

<div class="form-group">
<input type="text" class="form-control" placeholder="Tindak
Pidana" name="tindak_pidana">
</div>

<div class="form-group">
<input type="text" class="form-control" placeholder="Saksi"
name="saksi">
</div>

<div class="form-group">

<textarea class="form-control"
rows="3" placeholder="Uraian Kejadian"
name="uraian_kejadian"></textarea>

</div>
<div class="form-group">

<label> Upload Foto/File Bukti

Kejadian </label>
 <input type="file"
name="bukti[]" multiple="multiple" class="form-control"
required="required">

</div>
<div class="form-group">
<input type="submit" value="Laporkan" class="btn btn-primary
py-3 px-5">
</div>
</form>

</div>
</div>
</div>
</section>

<footer class="ftco-footer ftco-section">

<div class="container">
<div class="row mb-5">
</div>
<div class="row">
<div class="col-md-12 text-center">

<p>
Copyright &copy;<script>document.write(new
Date().getFullYear());</script> All rights reserved | Seksi
penyelidikan dan penyidikan , Mohamad Muksin
</p>
</div>
</div>
</div>
</footer>

<div id="ftco-loader" class="show fullscreen"><svg

class="circular" width="48px" height="48px"><circle
class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-
width="4" stroke="#eeeeee"/><circle class="path" cx="24"
cy="24" r="22" fill="none" stroke-width="4" stroke-
miterlimit="10" stroke="#F96D00"/></svg></div>

<script src="<?php echo base_url()

?>front/js/jquery.min.js"></script>
<script src="<?php echo base_url() ?>front/js/jquery-migrate-
3.0.1.min.js"></script>
<script src="<?php echo base_url()
?>front/js/popper.min.js"></script>
<script src="<?php echo base_url()
?>front/js/bootstrap.min.js"></script>
<script src="<?php echo base_url()
?>front/js/jquery.easing.1.3.js"></script>
<script src="<?php echo base_url()
?>front/js/jquery.waypoints.min.js"></script>
<script src="<?php echo base_url()
?>front/js/jquery.stellar.min.js"></script>
 <script src="<?php echo base_url()
?>front/js/owl.carousel.min.js"></script>
<script src="<?php echo base_url() ?>front/js/jquery.magnific-
popup.min.js"></script>
<script src="<?php echo base_url()
?>front/js/aos.js"></script>
<script src="<?php echo base_url()
?>front/js/jquery.animateNumber.min.js"></script>
<script src="<?php echo base_url()
?>front/js/scrollax.min.js"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrj
vy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="<?php echo base_url() ?>front/js/google-
map.js"></script>

<script src="<?php echo base_url()

?>front/js/main.js"></script>

</body>
</html>
 laporansukses.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>SisPerda - Tangerang Selatan</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">

<link
href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,
300,400,600,700,800,900" rel="stylesheet">

<link rel="stylesheet" href="<?php echo base_url()

?>front/css/open-iconic-bootstrap.min.css">
<link rel="stylesheet" href="<?php echo base_url()
?>front/css/animate.css">

<link rel="stylesheet" href="<?php echo base_url()

?>front/css/owl.carousel.min.css">
<link rel="stylesheet" href="<?php echo base_url()
?>front/css/owl.theme.default.min.css">
<link rel="stylesheet" href="<?php echo base_url()
?>front/css/magnific-popup.css">

<link rel="stylesheet" href="<?php echo base_url()

?>front/css/aos.css">

<link rel="stylesheet" href="<?php echo base_url()

?>front/css/ionicons.min.css">

<link rel="stylesheet" href="<?php echo base_url()

?>front/css/flaticon.css">
<link rel="stylesheet" href="<?php echo base_url()
?>front/css/icomoon.css">
<link rel="stylesheet" href="<?php echo base_url()
?>front/css/style.css">
</head>
<body data-spy="scroll" data-target=".site-navbar-target"
data-offset="300">

<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar

bg-dark ftco-navbar-light site-navbar-target" id="ftco-
navbar">
<div class="container">
<a class="navbar-brand"
href="#">SILAPPERDA<span>Tangsel</span></a>
<button class="navbar-toggler js-fh5co-nav-toggle fh5co-nav-
toggle" type="button" data-toggle="collapse" data-
target="#ftco-nav" aria-controls="ftco-nav" aria-
expanded="false" aria-label="Toggle navigation">
<span class="oi oi-menu"></span> Menu
</button>

<div class="collapse navbar-collapse" id="ftco-nav">

<ul class="navbar-nav nav ml-auto">
<li class="nav-item"><a href="<?php echo base_url() ?>#home-
section" class="nav-link"><span>Home</span></a></li>
<li class="nav-item"><a href="<?php echo base_url()
?>home/lapor" class="nav-link active"><span>Lapor
</span></a></li>
<li class="nav-item"><a href="<?php echo base_url()
?>#projects-section" class="nav-link"><span>Track
Laporan</span></a></li>
<li class="nav-item"><a href="<?php echo base_url() ?>login"
class="nav-link"><span>Login Admin</span></a></li>

</ul>
</div>
</div>
</nav>

<br /><br />

<section class="ftco-section ftco-project bg-light"

id="projects-section">
<div class="container px-md-5">
<div class="row justify-content-center pb-5">
<div class="col-md-12 heading-section text-center ftco-
animate">
<span class="subheading">Laporan Anda</span>
<h2 class="mb-4">Laporan Anda Telah berhasil diajukan, Klik
Track laporan untuk mentrack laporan anda,</h2>
<p>Anda akan dihubungi oleh kami dalam waktu dekat untuk
konfirmasi via WA/Telepon</p>
<br />
<br />
<a class="btn btn-primary btn-lg" href="<?php echo base_url()
?>"> Klik Untuk Kembali </a>
</div>
</div>
</div>
</section>

<footer class="ftco-footer ftco-section">

<div class="container">
<div class="row mb-5">
<div class="col-md">
<div class="ftco-footer-widget mb-4">
<h2 class="ftco-heading-2">Bidang Penegakan Peraturan
Daerah</h2>
<p>Far far away, behind the word mountains, far from the
countries Vokalia and Consonantia, there live the blind
texts.</p>
<ul class="ftco-footer-social list-unstyled float-md-left
float-lft mt-5">
<li class="ftco-animate"><a href="<?php echo base_url()
?>front/#"><span class="icon-twitter"></span></a></li>
<li class="ftco-animate"><a href="<?php echo base_url()
?>front/#"><span class="icon-facebook"></span></a></li>
<li class="ftco-animate"><a href="<?php echo base_url()
?>front/#"><span class="icon-instagram"></span></a></li>
</ul>
</div>
</div>
<div class="col-md">
<div class="ftco-footer-widget mb-4 ml-md-4">
<h2 class="ftco-heading-2">Bidang Sumber Daya</h2>
<ul class="list-unstyled">
<li><a href="<?php echo base_url() ?>front/#"><span
class="icon-long-arrow-right mr-2"></span>Home</a></li>
<li><a href="<?php echo base_url() ?>front/#"><span
class="icon-long-arrow-right mr-2"></span>About</a></li>
<li><a href="<?php echo base_url() ?>front/#"><span
class="icon-long-arrow-right mr-2"></span>Services</a></li>
<li><a href="<?php echo base_url() ?>front/#"><span
class="icon-long-arrow-right mr-2"></span>Projects</a></li>
<li><a href="<?php echo base_url() ?>front/#"><span
class="icon-long-arrow-right mr-2"></span>Contact</a></li>
</ul>
</div>
</div>
<div class="col-md">
<div class="ftco-footer-widget mb-4">
<h2 class="ftco-heading-2">Bidang Perlindungan Masyarakat</h2>
<ul class="list-unstyled">
<li><a href="<?php echo base_url() ?>front/#"><span
class="icon-long-arrow-right mr-2"></span>Web Design</a></li>
<li><a href="<?php echo base_url() ?>front/#"><span
class="icon-long-arrow-right mr-2"></span>Web
Development</a></li>
<li><a href="<?php echo base_url() ?>front/#"><span
class="icon-long-arrow-right mr-2"></span>Business
Strategy</a></li>
<li><a href="<?php echo base_url() ?>front/#"><span
class="icon-long-arrow-right mr-2"></span>Data
Analysis</a></li>
<li><a href="<?php echo base_url() ?>front/#"><span
class="icon-long-arrow-right mr-2"></span>Graphic
Design</a></li>
</ul>
</div>
</div>
<div class="col-md">
<div class="ftco-footer-widget mb-4">
<h2 class="ftco-heading-2">Bidang Ketertiban Umum dan
Ketentraman Masyarakat</h2>
<div class="block-23 mb-3">
<ul>
<li><span class="icon icon-map-marker"></span><span
class="text">203 Fake St. Mountain View, San Francisco,
California, USA</span></li>
<li><a href="<?php echo base_url() ?>front/#"><span
class="icon icon-phone"></span><span class="text">+2 392 3929
210</span></a></li>
<li><a href="<?php echo base_url() ?>front/#"><span
class="icon icon-envelope"></span><span
class="text">info@yourdomain.com</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">

<p>
Copyright &copy;<script>document.write(new
Date().getFullYear());</script> All rights reserved | Seksi
penyelidikan dan penyidikan , Mohamad Muksin
</p>
</div>
</div>
</div>
</footer>

<!-- loader -->

<div id="ftco-loader" class="show fullscreen"><svg
class="circular" width="48px" height="48px"><circle
class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-
width="4" stroke="#eeeeee"/><circle class="path" cx="24"
cy="24" r="22" fill="none" stroke-width="4" stroke-
miterlimit="10" stroke="#F96D00"/></svg></div>

<script src="<?php echo base_url()

?>front/js/jquery.min.js"></script>
 <script src="<?php echo base_url() ?>front/js/jquery-migrate-
3.0.1.min.js"></script>
<script src="<?php echo base_url()
?>front/js/popper.min.js"></script>
<script src="<?php echo base_url()
?>front/js/bootstrap.min.js"></script>
<script src="<?php echo base_url()
?>front/js/jquery.easing.1.3.js"></script>
<script src="<?php echo base_url()
?>front/js/jquery.waypoints.min.js"></script>
<script src="<?php echo base_url()
?>front/js/jquery.stellar.min.js"></script>
<script src="<?php echo base_url()
?>front/js/owl.carousel.min.js"></script>
<script src="<?php echo base_url() ?>front/js/jquery.magnific-
popup.min.js"></script>
<script src="<?php echo base_url()
?>front/js/aos.js"></script>
<script src="<?php echo base_url()
?>front/js/jquery.animateNumber.min.js"></script>
<script src="<?php echo base_url()
?>front/js/scrollax.min.js"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrj
vy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="<?php echo base_url() ?>front/js/google-
map.js"></script>

<script src="<?php echo base_url()

?>front/js/main.js"></script>

</body>
</html>
 login.php
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" type="image/png" sizes="16x16"
href="../assets/images/favicon.png">
<title>Login</title>

<link href="<?php echo base_url() ?>dist/css/pages/login-

register-lock.css" rel="stylesheet">
<link href="<?php echo base_url() ?>dist/css/style.min.css"
rel="stylesheet">
</head>

<body>
<div class="preloader">
<div class="loader">
<div class="loader__figure"></div>
<p class="loader__label">E-Proposal</p>
</div>
</div>
<section id="wrapper" class="login-register login-sidebar"
style="background-image:url(<?php echo base_url()
?>assets/images/background/login-register.jpg);">
<div class="login-box card">
<div>
<?php echo @$this->session->flashdata('item'); ?>
</div>

<div class="card-body">
<form class="form-horizontal form-material text-center"
id="loginform" action="<?php echo base_url() ?>login/proses"
method="POST">
<a href="javascript:void(0)" class="db"><img src="<?php echo
base_url() ?>img/ppns.png" alt="Home" style='height:100px;'
/></a>
<div class="form-group m-t-40">
<div class="col-xs-12">
<input class="form-control" type="text" required=""
name="username" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<input class="form-control" type="password" required=""
name="password" placeholder="Password">
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<div class="d-flex no-block align-items-center">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input"
id="customCheck1">
<label class="custom-control-label"
for="customCheck1">Remember me</label>
</div>
</div>
</div>
</div>
<div class="form-group text-center m-t-20">
<div class="col-xs-12">
<button class="btn btn-info btn-lg btn-block text-uppercase
btn-rounded" type="submit">Log In</button>
</div>
</div>
</form>
<form class="form-horizontal" id="recoverform"
action="index.html">
<div class="form-group ">
<div class="col-xs-12">
 <h3>Recover Password</h3>
<p class="text-muted">Enter your Email and instructions will
be sent to you! </p>
</div>
</div>
<div class="form-group ">
<div class="col-xs-12">
<input class="form-control" type="text" required=""
placeholder="Email">
</div>
</div>
<div class="form-group text-center m-t-20">
<div class="col-xs-12">
<button class="btn btn-primary btn-lg btn-block text-uppercase
waves-effect waves-light" type="submit">Reset</button>
</div>
</div>
</form>
</div>
</div>
</section>
<script src="<?php echo base_url()
?>assets/node_modules/jquery/jquery-3.2.1.min.js"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="<?php echo base_url()
?>assets/node_modules/popper/popper.min.js"></script>
<script src="<?php echo base_url()
?>assets/node_modules/bootstrap/dist/js/bootstrap.min.js"></sc
ript>
<script type="text/javascript">
$(function() {
$(".preloader").fadeOut();
});
$(function() {
$('[data-toggle="tooltip"]').tooltip()
});
$('#to-recover').on("click", function() {
$("#loginform").slideUp();
$("#recoverform").fadeIn();
});
</script>

</body>

</html>
 print.php
<html>
<head>
<style>
@page {
margin: 100px 25px;
}

header {
position: fixed;
 top: -90px;
left: 0px;
right: 0px;
height: 100px;

/** Extra personal styles **/

border-bottom:double;
}

.title {
text-align:center;
font-size:20px;
}

footer {

#tindakpidana {
width:100%;
border-collapse: collapse;
border-left:none;
border-right:none;

#tindakpidana td {
height:80px;
vertical-align: top;
padding:2px;
}
</style>
</head>
<body>
<header>

<img src="./img/logosatpolpp.png" width="70" align="left">

<img src="./img/ppns.png" width="70" align="right">
<center>
<span class="title"> PEMERINTAH KOTA TANGERANG SELATAN <br />
SATUAN POLISI PAMONG PRAJA <br />
Jl. Raya Puspitek No. I Kecamatan Setu - Kota
Tangerang Selatan <br />
Tel ./Fax. (021) 7588 3830 Website :
www.satpolppkotatangsel.info </span>
</center>
</header>

<footer>
</footer>

<main>
<br />
<h4>Bukti Laporan Online <br /> Laporan Kejadian </h4>
<h4> NPMOR :
LK/&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/SET-
PPNS/&nbsp;&nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp;&nbsp; </h4>
<p> Peristiwa yang dilaporkan </p>
<table>
<tr>
<td> 1. </td>
<td> Waktu Kejadian (Hari,Tanggal) </td>
<td> : </td>
<td><?php echo $data->tanggal ?></td>
</tr>
<tr>
<td> 2. </td>
<td> Tempat Kejadian </td>
<td> : </td>
<td><?php echo $data->tempat ?></td>
</tr>
<tr>
<td> 3. </td>
<td> Apa yang terjadi </td>
<td> : </td>
<td><?php echo $data->apa_terjadi ?></td>
</tr>
<tr>
<td> 4. </td>
<td> Siapa: a.) Terlapor <br
/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;b.) Korban </td>
<td> : <br />
: </td>
<td><?php echo $data->terlapor ?><br /><?php echo $data-
>korban ?></td>
</tr>
<tr>
<td> 5. </td>
<td> Bagaimana Terjadi </td>
<td> : </td>
<td><?php echo $data->bagaimana ?></td>
</tr>
<tr>
<td> 6. </td>
<td> Dilaporkan pada (Hari, Tgl, Jam) </td>
<td> : </td>
<td><?php echo $data->tanggal_lapor ?></td>
</tr>
</table>
<br />
<table border="1" id="tindakpidana">
<tr>
<td> Tindak Pidana : <br /><?php echo $data->tindak_pidana
?></td>
<td> Nama Dan Alamat Saksi Saksi <br /><?php echo $data->saksi
?></td>
</tr>
<tr>
<td> Barang Bukti : <br /></td>
 <td> Uraian Kejadian <br /><?php echo $data->uraian_kejadian
?></td>
</tr>
<tr>
<td> Tindakan yang diambil : </td>
<td><?php echo @$data->tindakan ?></td>
</tr>
</table>
<div style='float:left;'>
<h5> Mengetahui </h5><br />
Kepala Satuan Polisi Pamong Praja <br />
Selaku Atasan Penyidik <br />
<br />
<br />
<br />
<br />
<br />
....................................<br />
NIP. ..............................
</div>
<div style="float:right">
Tangerang Selatan, <?php echo
ambilbulan(date('m')); ?><?php echo date('Y'); ?>
<br />
<br />
Nama : ........ <br />
Pelapor : - <br />
Tanda Tangan :
</div>
</main>
</body>
</html>
 track.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>SisPerda - Tangerang Selatan</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1, shrink-to-fit=no">

<link
href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,
300,400,600,700,800,900" rel="stylesheet">

<link rel="stylesheet" href="<?php echo base_url()

?>front/css/open-iconic-bootstrap.min.css">
<link rel="stylesheet" href="<?php echo base_url()
?>front/css/animate.css">

<link rel="stylesheet" href="<?php echo base_url()

?>front/css/owl.carousel.min.css">
<link rel="stylesheet" href="<?php echo base_url()
?>front/css/owl.theme.default.min.css">
<link rel="stylesheet" href="<?php echo base_url()
?>front/css/magnific-popup.css">

<link rel="stylesheet" href="<?php echo base_url()

?>front/css/aos.css">

<link rel="stylesheet" href="<?php echo base_url()

?>front/css/ionicons.min.css">

<link rel="stylesheet" href="<?php echo base_url()

?>front/css/flaticon.css">
<link rel="stylesheet" href="<?php echo base_url()
?>front/css/icomoon.css">
<link rel="stylesheet" href="<?php echo base_url()
?>front/css/style.css">
</head>
<body data-spy="scroll" data-target=".site-navbar-target"
data-offset="300">

<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar

bg-dark ftco-navbar-light site-navbar-target" id="ftco-
navbar">
<div class="container">
<a class="navbar-brand" href="<?php echo base_url()
?>front/index.html">SILAPPERDA<span>Tangsel</span></a>
<button class="navbar-toggler js-fh5co-nav-toggle fh5co-nav-
toggle" type="button" data-toggle="collapse" data-
target="#ftco-nav" aria-controls="ftco-nav" aria-
expanded="false" aria-label="Toggle navigation">
<span class="oi oi-menu"></span> Menu
</button>

<div class="collapse navbar-collapse" id="ftco-nav">

<ul class="navbar-nav nav ml-auto">
<li class="nav-item"><a href="<?php echo base_url() ?>#home-
section" class="nav-link"><span>Home</span></a></li>
<li class="nav-item"><a href="<?php echo base_url()
?>home/lapor" class="nav-link "><span>Lapor </span></a></li>
<li class="nav-item"><a href="<?php echo base_url()
?>#projects-section" class="nav-link active"><span>Track
Laporan</span></a></li>
<li class="nav-item"><a href="<?php echo base_url() ?>login"
class="nav-link"><span>Login Admin</span></a></li>

</ul>
</div>
</div>
</nav>

<br /><br />

<section class="ftco-section ftco-project bg-light"

id="projects-section">
<div class="container px-md-5">
<div class="row justify-content-center pb-5">
<div class="col-md-12 heading-section text-center ftco-
animate">
<span class="subheading">Track Laporan Anda</span>
<h2 class="mb-4">Laporan Anda Telah berhasil diajukan, Klik
Track laporan untuk mentrack laporan anda,</h2>

<input type="text" name="nik" class="form-control"

placeholder="Masukan NIK Anda">
<br />
<button class="btn btn-primary btn-lg" id="btntrack"> Track
Laporan </button>

<div id="hasildata"></div>
<br />
<br />
</div>
</div>
</div>
</section>

<footer class="ftco-footer ftco-section">

<div class="container">

<div class="row">
<div class="col-md-12 text-center">

<p>
Copyright &copy;<script>document.write(new
Date().getFullYear());</script> All rights reserved | Seksi
penyelidikan dan penyidikan , Mohamad Muksin
</p>
</div>
</div>
</div>
</footer>

<div id="ftco-loader" class="show fullscreen"><svg

class="circular" width="48px" height="48px"><circle
class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-
width="4" stroke="#eeeeee"/><circle class="path" cx="24"
cy="24" r="22" fill="none" stroke-width="4" stroke-
miterlimit="10" stroke="#F96D00"/></svg></div>

<script src="<?php echo base_url()

?>front/js/jquery.min.js"></script>
<script src="<?php echo base_url() ?>front/js/jquery-migrate-
3.0.1.min.js"></script>
<script src="<?php echo base_url()
?>front/js/popper.min.js"></script>
<script src="<?php echo base_url()
?>front/js/bootstrap.min.js"></script>
<script src="<?php echo base_url()
?>front/js/jquery.easing.1.3.js"></script>
 <script src="<?php echo base_url()
?>front/js/jquery.waypoints.min.js"></script>
<script src="<?php echo base_url()
?>front/js/jquery.stellar.min.js"></script>
<script src="<?php echo base_url()
?>front/js/owl.carousel.min.js"></script>
<script src="<?php echo base_url() ?>front/js/jquery.magnific-
popup.min.js"></script>
<script src="<?php echo base_url()
?>front/js/aos.js"></script>
<script src="<?php echo base_url()
?>front/js/jquery.animateNumber.min.js"></script>
<script src="<?php echo base_url()
?>front/js/scrollax.min.js"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrj
vy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
<script src="<?php echo base_url() ?>front/js/google-
map.js"></script>

<script src="<?php echo base_url()

?>front/js/main.js"></script>
<script>
$(document).ready(function(){

$("#btntrack").click(function(){
var nik = $("[name='nik']").val();
$.ajax({
type:"POST",
data:"nik="+nik,
url:"<?php echo base_url() ?>lapor/tracknik",
success:function(dt){
$("#hasildata").html(dt);
}
})

})

});
</script>

</body>
</html>
 welcome_message.php
<?php
defined('BASEPATH') OR exit('No direct script access
allowed');
?><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to CodeIgniter</title>

<style type="text/css">
 ::selection { background-color: #E13300; color: white; }
::-moz-selection { background-color: #E13300; color: white;
}

body {
background-color: #fff;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
}

a {
color: #003399;
background-color: transparent;
font-weight: normal;
}

h1 {
color: #444;
background-color: transparent;
border-bottom: 1px solid #D0D0D0;
font-size: 19px;
font-weight: normal;
margin: 0 0 14px 0;
padding: 14px 15px 10px 15px;
}

code {
font-family: Consolas, Monaco, Courier New, Courier,
monospace;
font-size: 12px;
background-color: #f9f9f9;
border: 1px solid #D0D0D0;
color: #002166;
display: block;
margin: 14px 0 14px 0;
padding: 12px 10px 12px 10px;
}

#body {
margin: 0 15px 0 15px;
}

p.footer {
text-align: right;
font-size: 11px;
border-top: 1px solid #D0D0D0;
line-height: 32px;
padding: 0 10px 0 10px;
margin: 20px 0 0 0;
}

#container {
margin: 10px;
border: 1px solid #D0D0D0;
box-shadow: 0 0 8px #D0D0D0;
 }
</style>
</head>
<body>

<div id="container">
<h1>Welcome to CodeIgniter!</h1>

<div id="body">
<p>The page you are looking at is being generated
dynamically by CodeIgniter.</p>

<p>If you would like to edit this page you'll find it

located at:</p>
<code>application/views/welcome_message.php</code>

<p>The corresponding controller for this page is found

at:</p>
<code>application/controllers/Welcome.php</code>

<p>If you are exploring CodeIgniter for the very first

time, you should start by reading the <a
href="user_guide/">User Guide</a>.</p>
</div>

<p class="footer">Page rendered in

<strong>{elapsed_time}</strong> seconds. <?php echo
(ENVIRONMENT === 'development') ? 'CodeIgniter Version
<strong>' . CI_VERSION . '</strong>' : '' ?></p>
</div>

</body>
</html>
LAMPIRAN 3
SURAT-SURAT