PROJEK UJIKOM

APLIKASI PELAPORAN PENGADUAN MASYARAKAT ( APPEM )

BERBASIS WEB DENGAN FRAMEWORK BOOTSTRAP
Diajukan Untuk melengkapi Persyaratan Kelulusan
Tahun Pelajaran 2019/2020

Disusun oleh :

MUHAMMAD JIHAD SYUHADA

NIS : 171810137
NISN : 0011526888

Kompetensi Keahlian :
REKAYASA PERANGKAT LUNAK

SMK DWIGUNA DEPOK

Jl. Raya Citayam Gg.H.Dul No.32 Bojong Pondok Terong, Cipayung - Depok Telp. 021-7756723
Email : smk.dwiguna@gmail.com

2020
 Kata Pengantar
Dengan Memanjatkan Puji Syukur Kepada Tuhan Yang Maha Esa atas segala rahmat
dan karunia-Nya, sehingga kami dapat menyelesaikan karya laporan tugas akhir ini yang
berjudul “Aplikasi Pelaporan Pengaduan Masyarakat (APPEM) Berbasis Web Dengan
Framework Bootstrap”.

Tugas akhir ini ditujukan untuk memenuhi persyaratan dalam menempuh Ujian
Kompetensi Keahlian Siswa Di Smk Ti DwiGuna Depok .

Dalam menyusun laporan ini Saya mengucapkan terima kasih kepada bapak dan ibu
yang telah membimbing dan membantu dalam menyusun laporan Ujian Kompetensi Kejuruan
ini. Dengan selesainya karya tulis ini Saya menyampaikan rasa hormat Saya kepada:
1. Bapak Nurdin Budiyanto, M.Pd, selaku Kepala Sekolah SMK DWIGUNA Depok.
2. Bapak Maman Fernandy, M.Kom, selaku Kepala Kurikulum.
3. Bapak Muhammad Hilman, Amd. Kom, selaku Kepala Program Rekayasa Perangkat Lunak.
4. Seluruh dewan guru staff Sekolah Menengah Kejuruan SMK DWIGUNA Depok.
5. Seluruh Kawan - Kawan Sekolah Menengah Kejuruan SMK DWIGUNA Depok.
6. Orang tua kami yang telah memberikan moril maupun materi.

Saya menyadari bahwa penyusunan laporan Ujian Kompetensi Kejurusan (UKK) ini masih
belum sempurna, untuk itu Saya mengharapkan saran dan kritik yang membangun dan
bermanfaat bagi saya dan semoga laporan yang saya susun dapat berguna bagi siapapun yang
membaca.
Depok, 24 April 2020

Muhammad Jihad Syuhada

SMK TI DWI GUNA | 2

 DAFTAR ISI

KATA PENGANTAR......................................................................................................................…2
DAFTAR ISI.....................................................................................................................3
DAFTAR GAMBAR..........................................................................................................4
DAFTAR TABLE...............................................................................................................5
BAB I PENDAHULUAN....................................................................................................6-7
A. Latar Belakang................................................................................................................6-7
B. Tujuan Pembuatan Dokumen......................................................................................6-7
C. Dekripsi umum Sistem...................................................................................................6-7
BAB II KAJIAN TEORI....................................................................................................................8
A. Kebutuhan Hardware dan Software.........................................................................8
BAB III PEMBAHASAN.................................................................................................................9
A. Struktur Menu.................................................................................................. 9
B. Penggunaan..................................................................................................................9
BAB IV PENUTUP..........................................................................................................................16
A. Kesimpulan....................................................................................................... 16
B. Saran..............................................................................................................................16

SMK TI DWI GUNA | 3

 DAFTAR GAMBAR

Gambar 3.1 Form Login Masyarakat........................................................................................10

Gambar 3.2 Daftar Masyarakat.................................................................................................11
Gambar 3.3 Halaman Masyarakat.............................................................................................11
Gambar 3.4 Tulis Pengaduan.....................................................................................................12
Gambar 3.5 Lihat Pengaduan.....................................................................................................12
Gambar 3.6 Form Login Admin/Petugas..................................................................................13
Gambar 3.7 Halaman Petugas...................................................................................................14
Gambar 3.8 Proses Pengaduan..................................................................................................15
Gambar 3.9 Halaman Admin......................................................................................................15
Gambar 3.10 Verivikasi Pengaduan..........................................................................................15

SMK TI DWI GUNA | 4

 DAFTAR TABLE

Table 2.1 Kebutuhan Hardware yang digunakan....................................................................8

Table 2.2 Kebutuhan Software..................................................................................................8

SMK TI DWI GUNA | 5

 BAB I

PENDAHULUAN

A. Latar Belakang

APPEM berfungsi sebagai Wadah dari berbagai Laporan Masyarakat yang ada
dilingkungan Dinas Terkait. Dengan adanya APPEM, masyarakat dapat melaporkan
Pengaduan dengan Cepat dan Mudah.

B. Tujuan Pembuatan Dokumen

Dokumen user manual Aplikasi Pelaporan Pengaduan Masyarakat (APPEM) ini

dibuat untuk tujuan sebagai berikut :

1. Menggambarkan dan Menjelaskan penggunaan Aplikasi APPEM untuk admin,

petugas dan masyarakat.

2. Sebagai Panduan instalasi , konfigurasi dan penggunaan Aplikasi APPEM ini.

Pihak – pihak yang berkepentingan dan berhak untuk menggunakan dokumen ini
yaitu :

1. Administrator APPEM

Administrator menggunakan dokumen ini sebagai panduan untuk mereka

bagaimana cara menggunakan dan melakukan pemeliharaan untuk
Aplikasi APPEM.
 2. Petugas APPEM

Petugas APPEM sama dengan Administrator APPEM namun hanya

beberapa akses yang diberikan kepada petugas tidak semua akses
didalam Aplikasi APPEM tersebut bias digunakan si Petugas.

3. Masyarakat
Masyarakat menggunakan dokumen ini sebagai panduan pengguanaan
Aplikasi ini sebagai hak akses yang di berikan kepada Masyarakat.

SMK TI DWI GUNA | 6

C. Dekripsi Umum Sistem
1. Dekripsi Umum Aplikasi

Aplikasi Pelaporan Pengaduan Masyarakat (APPEM) berguna untuk Menampung

segala jenis Pengaduan yang di Laporkan Oleh Pihak Masyarakat, dan Laporan yang
dimasukkan akan di Proses oleh Pihak Petugas yang dimana Petugas akan Melakukan
Pengecekan terhadap Laporan Tersebut. Apabila Terdapat Kebenaran adanya Laporan
tersebut, Pihak Petugas akan segera Memprosesnya dan apabila Telah selesai di
Proses Pihak Administrator akan Memverifikasi bahwa Laporan Pengaduan Tersebut
Telah Selesai Diatasi. Dan Apabila Laporan yang di Proses oleh Petugas terdapat
Kesalahan Informasi yang di Laporkan, Maka Laporan Tersebut tidak Akan di Proses
dan Juga tidak akan di tanggapi oleh Administrator.
SMK TI DWI GUNA | 7
 BAB II

KAJIAN TEORI

A. Kebutuhan Hardware & Software

1. Kebutuhan Hardware:
Kebutuhan Hardware ( Perangkat Keras ) yang digunakan dalam pengembangan
aplikasi ini adalah sebagai berikut :

Tabel 2.1 Kebutuhan Hardware yang Digunakan

Hardware
Spesifikasi
(Perangkat Keras)
Processor Intel(R) Celeron(R)

RAM 2.00 GB (1.87 GB usable)

System Type 64-bit Operating System, x64-based processor

Pen and Touch No Pen or Touch Input is available for this Display

2. Kebutuhan Software :

Adapun Kebutuhan Software ( Perangkat Lunak ) yang digunakan untuk

implementasikan system aplikasi ini adalah sebagai berikut :

Tabel 2.2 Kebutuhan Sofware (Perangkat Lunak)

Software (Perangkat
Keterangan
Lunak)
Windows 7 / Windows
Sebagai sistem operasi
10
Apache Sebagai server web
Mysql Sebagai database
XAMPP Sebagai aplikasi penyedia Apache dan Mysql
Notepad++ dan Sublime
Sebagai editor pemrograman
Text
Notepad++ dan Sublime
Sebagai editor pemrograman
Text
Google Chrome dan
Sebagai aplikasi implementasi program
Mozilla Firefox
Bootstrap Sebagai perangkat lunak untuk desain program
PHP, HTML, Javascript,
Sebagai bahasa pemrograman web
jQuery,
Sebagai perangkat lunak untuk desain program
3. Penggunaan Aplikasi

Penggunaan aplikasi yang akan menggunakan aplikasi ini terutama admin,

petugas dan masyarakat adalah sebagai berikut :
1. Memiliki pemahaman tentang antar muka computer
2. Memiliki pemahaman data keluhan masyarakat.
4. Pengenalan dan pelatihan

Sumber daya manusia yang terlibat dalam operasional penggunaaan aplikasi ini
sehari – hari terlebih dahulu diberikan pengenalan dan pelatihan yang cukup untuk
menggunakan aplikasi APPEM ini.

SMK TI DWI GUNA | 8

 BAB III

PEMBAHASAN

A. Struktur Menu
1. Menu Login Masyarakat, Petugas dan Admin
2. Menu Dashboard
 Admin
a. Verifikasi Pengaduan
b. Data
c. Data Petugas
d. Data Masyarakat
e. Data Pengaduan
f. Data Tanggapan
g. Print Data
h. Print Data Petugas
i. Print Data Masyarakat
j. Print Data Pengaduan
k. Print Data Tanggapan
l. Keluar
 Petugas
a. Data Complaint
b. Proses Pengaduan
c. Lihat Pengaduan
d. Keluar
 Masyarakat
a. Tulis Pengaduan
b. Lihat Pengaduan
c. Keluar

B. Penggunaan
Pada Bagian ini akan dijelaskan mengenai tata cara memasukan data sebagai data
sumber melalui alamat situs yang telah disediakan, setiap kapan data keluhan masyarakat
harus diverikikasi.

SMK TI DWI GUNA | 9

1. Cara membuka Halaman Masyarakat
a. Buka Xampp, Lalu nyalakan APACHE dan MYSQL ( jika offline )

b. Buka Aplikasi APPEM melalui web Browser seperti : (IE, Mozila, FireFox,
dll.) dengan alamat URL sebagai berikut :

 http://appem.epizy.com

 Localhost/appem (untuk offline )

c. Kemudian tekan Enter pada tombol keyboard atau klik tombol Go pada
browser

d. Akan muncul tampilan halaman depan aplikasi APPEM. Maka pada layar
akan tampak Halaman Login Masyarakat / Awal situs APPEM
2. Masyarakat
a. Login Masyarakat

Gambar 3.1 Form Login Masyarakat

Ini adalah Halaman Login Masyarakat, apabila Belum memiliki Akun

silahkan untuk register terlebih dahulu dengan meng click ‘Silahkan Register’,
apabila sudah memiliki Akun maka silahkan untuk Memasukkan username dan
password anda, Apabila username dan password telah terdaftar, maka anda
akan menuju halaman masyarakat. Apabila username atau password salah, anda
tetap akan berada di halaman login masyarakat. (Gambar 3.1)

SMK TI DWI GUNA | 10

 b. Register Masyarakat

Gambar 3.2 Register Masyarakat

Silahkan isi form yang ada, apabila sudah selesai anda dapat login menggunakan
akun yang sudah anda buat. (Gambar 3.2)

c . Halaman Masyarakat

Gambar 3.3 Halaman Masyarakat

Apabila anda sudah Login. Maka anda akan diarahkan menuju Halaman
Masyarakat seperti gambar diatas (Gambar 3.3)

SMK TI DWI GUNA | 11

 d. Tulis Pengaduan

Gambar 3.4 Tulis Pengaduan

Disini masyarakat dapat Menuliskan Laporan yang ingin di Laporkan juga

menyertakan Bukti Fotonya (Gambar 3.4)

e. Lihat Pengaduan

Gambar 3.5 Lihat Pengaduan

Anda dapat melihat semua Data Pengaduan yang sudah di masukkan. Baik di
masukkan oleh Anda juga dimasukkan oleh masyarakat lain. (Gambar 3.5)

SMK TI DWI GUNA | 12

3. Admin dan Petugas

a. Login Admin/Petugas

Gambar 3.6 Login Admin/Petugas

Ini adalah Halaman Login Admin juga Petugas

b. Halaman Petugas

Fitur Lihat Pengaduan disini sama dengan yang ada di Masyarakat.

Gambar 3.7

Petugas yang sudah Login akan diarahkan menuju Halaman Petugas (Gambar 3.7)

SMK TI DWI GUNA | 13

 c. Proses Pengaduan

Gambar 3.8
Petugas dapat Memproses Pengaduan yang telah masuk disini (Gambar 3.8)

d. Halaman Admin

Gambar 3.9

Admin yang sudah Login akan diarahkan Menuju Halaman Admin (3.9)

e. Verifikasi Pengaduan

Gambar 3.10

Admin dapat melakukan Verifikasi Pengaduan yang sudah di Proses oleh

Petugas, disini admin juga dapat meberikan Tanggapannya pada saat Verifikasi
Pengaduan. (Gambar 3.10)

SMK TI DWI GUNA | 14

f. Data
Fitur Data adalah Rangkuman dari 2 Output Fitur Utama baik dari Bagian
Masyarakat dan juga Bagian Admin.
disini juga sama seperti Bagian Masyarakat dan Bagian Petugas, yang dimana
Terdapat 1 Fitur yaitu Lihat Pengaduan yang dimana di Bagian Admin
namanya di Revisi menjadi Data Pengaduan, ketiga Fitur diatas diubah
Menjadi Sub Fitur di dalam Fitur Data dan disini juga Terdapat Sub Fitur
Tambahan yaitu Data Petugas. Data Di dalam Fitur Data, dibagi menjadi 4
Sub Fitur yang sudah Saya jelaskan sebagaimana diatas. adapun Sub Fitur nya
sebagai berikut :

1. Data Petugas

Admin dapat Melihat Data Petugas sebagai mana Fitur Lihat Pengaduan,
hanya saja yang dilihat disini adalah Akun dari para Petugas. Disini juga
Admin dapat Mengedit , Menghapus , Menambah Petugas maupun
Menambah Admin .

2. Data Masyarakat

Seperti Data Petugas, disini admin dapat melihat Akun dari para Masyarakat,
hanya saja disini Admin hanya bisa Menghapus Masyarakat.

3. Data Pengaduan

Adalah Fitur Lihat Pengaduan yang di Revisi namanya menjadi Data

Pengaduan.

4. Data Tanggapan

Fitur ini sama dengan Fitur Data Pengaduan, disini juga Terdapat Tanggapan
dari Admin, dan juga di dalam fitur ini Admin dapat mengedit dan
menghapus Tanggapannya.

g. Print Data

Print Data adalah Fitur untuk Melakukan Perintah Print,

Sub Fitur Print Data sama dengan Sub Fitur dari Fitur Data diatas,
di dalam Fitur Print Data, Output dari Sub Fitur dapat di Print (di Cetak).

SMK TI DWI GUNA | 15

 BAB IV

PENUTUP

A. Kesimpulan

Apa yang saya Kerjakan Sekarang ini adalah bentuk dari Usaha saya Selama 3 tahun
belajar di sekolah maupun di luar sekolah.

B. Saran

Saya sadar dalam melaksanakan kegiatan Ujian ini masih banyak kekurangan.
Namun Saya telah berusaha melaksanakannya secara maksimal. Selain itu, laporan Ujian
Kopetensi Keahlian siswa ini juga masih jauh dari sempurna. Oleh karena itu, saran yang
membangun sangat saya perlukan guna memperbaiki laporan yang masih jauh dari kata
sempurna ini.

SMK TI DWI GUNA | 16