PERANCANGAN APLIKASI PENGADUAN MASYARAKAT DI …

PERANCANGAN APLIKASI PENGADUAN MASYARAKAT DI

KECAMATAN SECANGGANG MENGGUNAKAN ANDROID

LAPORAN TUGAS AKHIR

MAZDALIFAH

152406046

PROGRAM STUDI TEKNIK INFORMATIKA D3

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SUMATERA UTARA

MEDAN

2018




LAPORAN TUGAS AKHIR

Diajukanuntukmelengkapi tugas danmemenuhi syarat memperoleh

Ahli Madya

MAZDALIFAH

152406046

PROGRAM STUDI TEKNIK INFORMATIKA D3

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM


MEDAN

2018


PERNYATAAN



LAPORAN TUGAS AKHIR

Saya menyatakan bahwa laporan tugas akhir ini adalah hasil karya sendiri, kecuali

beberapa kutipan dan ringkasan yang masing-masing disebutkan sumbernya.

Medan, Juli 2018

Mazdalifah

152406046


i


ii

ABSTRAK

PERANCANGAN APLIKASI PENGADUAN MASYARAKAT DI KECAMATAN

SECANGGANG MENGGUNAKAN ANDROID

Oleh :

Mazdalifah (152406046)

Dengan semakin pesatnya kemajuan teknologi informasi, setiap instansi

pemerintahan berusaha dalam meningkatkan kualitas pelayanannya. Layanan

pengaduan masyarakat adalah salah satu bentuk partisipasi untuk ikut berperan dalam

membangun dan pengawasan terhadap kinerja instansi pemerintahan. Dalam hal ini

peneliti mengambil studi kasus Kecamatan Secanggang dimana masyarakat di

Kecamatan tersebut sulit untuk menyampaikan keluhan yang ada dilingkungannya

kepada pihak pemerintah terkait.

Dalam hal ini peneliti melakukan penelitian tentang penyampaian aspirasi atas

permasalahan dan keluhan yang terjadi pada masyarakat Secanggang yang tidak

tersalurkan. Dengan demikian dibutuhkan sebuah rancangan aplikasi layanan informasi

pengaduan untuk memudahkan masyarakat dalam menyampaikan keluhan dan

aspirasinya.

Metode yang digunakan dalam perancangan aplikasi sistem pengaduan ini

adalah model prototype dan di jalankan di sistem operasi android. Perangkat lunak

database aplikasi ini adalah menggunakan database jenis MySQL dan Bahasa

Pemrograman JAVA serta PHP dan SQL. Diharapkan dengan dibuatnya aplikasi

pengaduan masyarakat di Kecamatan Secanggang dapat membantu memberikan

informasi-informasi yang efektif dan mengurangi kesalahan dalam proses penanganan

data pengaduan masyarakat.

Kata kunci : JAVA, Kecamatan Secanggang, MySQL, Pengaduan Masyarakat,

Prototype.


iii

ABSTRACT

DESIGNING THE APPLICATION OF PEOPLE’S COMPLAINT

IN SECANGGANG SUBDISTRICT USING ANDROID

Submitted by

Mazdalifah (152406046)

With the rapid progress of information technology, every government agency

strives in improving the quality of its services.The public complaints service is a form

of participation to play a role in building and monitoring the performance of

government agencies. In this case the researcher took a case study in Secanggang sub-

district where the people in that sub-district were difficult to submit their existing

complaints to the related government.

In this case the researcher conducts research on the delivery of aspiration on the

problems and complaints that occur in Secanggang society that is not channeled. Thus,

it is necessary to design a complaint information service application to facilitate the

public in submitting their complaints and aspirations.

The method used in the design of this complaint system application is to collect

data, field research and design the application design complaints community in

Secanggang District and run on the android operating system.This application database

software is using MySQL type database and JAVA Programming Language.It is hoped

that the public complaint application in Secanggang Sub-district can help provide

effective information and reduce errors in the process of handling community

complaints data.

Keywords: JAVA, Secanggang District, MySQL, Community Complaint,Prototyping.


iv

PENGHARGAAN

Puji dan syukur penulis panjatkan kepada Tuhan Yang Maha Pemurah dan Maha

Penyayang, dengan limpah karunia-Nya Penulis dapat menyelesaikan penyusunan

laporan tugas akhir ini dengan judul Perancangan Aplikasi Pengaduan Masyarakat di

Kecamatan Secanggang Menggunakan Android.

Terima kasih penulis sampaikan kepada Bapak Dr. Syahriol Sitorus, S.Si., M.IT

selaku pembimbing yang telah meluangkan waktunya selama penyusunan laporan tugas

akhir ini. Terima kasih kepada Ibu Dra. Normalina Napitupulu, M.Sc dan Bapak Drs.

James Piter Marbun, M.Kom selaku ketua program studi dan sekertaris program studi

D3 Teknik Informatika FMIPA-USU Medan, dekan dan wakil dekan FMIPA USU,

seluruh staf dan dosen Program studi D3 Teknik Informatika FMIPA USU, pegawai dan

rekan-rekan kuliah. Akhirnya tidak terlupakan kepada Bapak, Ibu dan keluarga yang

selama ini memberikan bantuan dan dorongan yang diperlukan. Semoga Tuhan Yang

Maha Esa akan membalasnya.

Medan, Juli 2018

Mazdalifah


v

DAFTAR ISI

Halaman

PENGESAHAN LAPORAN TUGAS AKHIR i

ABSTRAK i

ABSTRACT ii

PENGHARGAAN iii

DAFTAR ISI v

DAFTAR TABEL vii

DAFTAR GAMBAR viii

DAFTAR LAMPIRAN x

DAFTAR SINGKATAN xi

BAB 1 PENDAHULUAN 1.1 Latar Belakang 1

1.2 Rumusan Masalah 2

1.3 Batasan Masalah 2

1.4 Tujuan Penelitian 2

1.5 Manfaat Penelitian 3

1.6 Metodologi Penelitian 3

1.7 Sistematika Penulisan 4

BAB 2 TINJAUAN PUSTAKA 2.2 Platform Android 7

2.3 Java 7

2.5 Android Studio 8

2.6 Database MySQL 9

2.7 XAMPP Control Panel 10

2.8 PHP Hypertext Preprocessor 11

2.9 Flowchart 11

2.10 Tinjauan Literatur 14

BAB 3 METODE PENELITIAN, ANALISIS DAN PERANCANGAN SISTEM 3.1 Metode Penelitian 15

3.2 Analisis Sistem 17

3.2.1 Analisis Sistem Berjalan 17

3.2.2 Analisis Sistem yang Diusulkan 17

3.3 Perancangan Sistem 18

3.3.1 Flowchart Program Aplikasi User 19

3.3.2 Flowchart Admin 20

3.3.3 Diagram Konteks Sistem 21

3.3.4 Data Flow Diagram (DFD) level 0 21

3.4 Perancangan Database 22

3.4.1 Perancangan Database Secara Logika 22

3.4.1.1 Normalisasi 22

3.4.1.2 Entity Relationship Diagram (ERD) 24


vi

3.4.2 Perancangan Database Secara Fisik 25

3.4.2.1 Penentuan tipe data 25

3.6 Perancangan Antar Muka Pengguna Aplikasi 26

3.7 Perancangan Tampilan Antarmuka Admin 31

BAB IV HASIL DAN PEMBAHASAN 4.1 Hasil dan Pembahasan 35

4.1.1 Implementasi Database 35

4.1.2 Implementasi Tampilan Antarmuka Pengguna 37

4.1.3 Impelementasi Tampilan Antarmuka Admin 43

4.2 Pengujian Aplikasi 44

4.2.1 Kasus dan Hasil Pengujian 45

4.2.2 Kesimpulan Hasil Pengujian Aplikasi 48

4.3 Pengujian Koresponden Aplikasi 49

BAB 5 KESIMPULAN DAN SARAN 5.1 Kesimpulan 54

5.2 Saran 54

DAFTAR PUSTAKA

LAMPIRAN


vii

DAFTAR TABEL

Nomor Judul Halaman

Tabel

2.1.Simbol Flowchart 11

3.1. Gambaran dari sistem yang diusulkan 17

3.3. Normal Form 22

3.4. Proses 1nf (1st normal form) 22

3.5. Entitas User 23

3.6. Entitas dana 23

3.6.Entitas Kegiatan 23

3.7. Entitas Admin 23

3.7.Penentuan tipe data untuk tabel user 25

3.8. Penentuan tipe data untuk tabel dana 26

3.9. Penentuan tipe data untuk tabel kegiatan 26

3.10.Penentuan tipe data untuk tabel admin 26


viii

DAFTAR GAMBAR

Nomor Judul Halaman

Gambar

3.1. Model Prototype 15

3.1. Flowchart Aplikasi User 19

3.2. Flowchart Admin 20

3.3. Diagram Konteks Sistem 21

3.4. Data Flow Diagram 21

3.5. Proses 3nf (3rd

normal form) 24

3.6. Entity Relationship Diagram 25

3.7. Tampilan Splashscreen 27

3.8. Tampilan login 27

3.9. Tampilan Kontent 28

3.10. Tampilan menu 28

3.11. Tampilan form laporan kegiatan umum 29

3.12. Tampilan form laporan penggunaan dana 29

3.13.Tampilan form progress kegiatan dan dana 30

3.14. Tampilan form register 30

3.15. Tampilan about 31

3.16.Halaman awal admin untuk aplikasi quikc report 31

3.17. Tampilan utama admin 32

3.18. Halaman untuk melihat data anggota 32

3.19. Halaman untuk melihat data laporan kegiatan 33

3.20. Halaman untuk melihat data laporan dana 33

3.21. Halaman Logout 34

4.1. Tampilan awal database quickreport 35

4.2. Tampilan tabel admin 36

4.3. Tampilan tabel dana 36

4.4. Tampilan tabel kegiatan 36

4.5. Tampilan tabel user 37

4.6. Tampilan awal aplikasi quickreport 37

4.7. Form login 38

4.8. Halaman berita 39

4.9. Halaman menu 39

4.10. Halaman lapor kegiatan umum 40

4.11. Halaman lapor penggunaan dana desa 41

4.12. Halaman lapor progress dana desa 42

4.13. Halaman About 42

4.14. Form daftar akun 43

4.15. Halaman awal admin 44

4.16. Halaman utama admin 44

4.17. Halaman data anggota 45

4.18.Halaman data laporan kegiatan 45


ix

4.19. Halaman data laporan dana 46

4.20. Halaman logout 46


x

DAFTAR LAMPIRAN

Nomor Judul Halaman

Lampiran

1. Listing Program 49

2. Surat Keterangan Dosen Pembimbing 94

3. Kartu Bimbingan Tugas Akhir 96

4. Surat Keterangan Hasil Uji Program 98


xi

DAFTAR SINGKATAN

IDE = Integrated Development Environment

RDBMS = Relational Database Management System

SQL = Structured Query Languange

PHP = Hypertext Preprocessor

ALPUKAT = Aplikasi Pengaduan Masyarakat

SDLC = Systems Development Life Cycle

ERD = Entity Relationship Diagram


BAB 1

PENDAHULUAN

1.1 Latar Belakang

Perkembangan teknologi saat ini telah memiliki manfaat yang sangat banyak,

selain untuk mengolah data dan menyimpan data, teknologi juga bisa digunakan

untuk mendukung penerapan dan pemanfaatan untuk perkembangan negara kita

sendiri, seperti yang kita ketahui perkembangan teknologi sangatlah pesat, tak heran

jika setiap menit waktu sudah ada lagi perkembangan teknologi terbaru.

Hal ini disebabkan oleh keinginan masyarakat untuk memperoleh kemudahan

dalam melakukan kegiatan sehari-hari mendorong pesatnya kemajuan teknologi.

Banyak teknologi yang sudah digunakan untuk memberikan kemudahan contohnya

seperti aplikasi berbasis android. Dengan adanya aplikasi berbasis android

memungkinkan seseorang untuk memperoleh informasi dengan bebas tanpa di batasi

oleh ruang dan waktu.

Interaksi masyarakat yang dulunya dilakukan secara fisik, sekarang mulai

beralih ke elektronik, karena secara elektronik interaksi yang dilakukan relatif dapat

dilakukan secara efisien, akurat dan nyaman. Misalnya sejak dulu hingga sekarang

masyarakat memberikan informasi atau melaporkan sesuatu yang terjadi di

lingkungan mereka harus mendatangi tempat yang menangani masalah tersebut.

Ironisnya cara demikian tidak efektif karena harus menghabiskan waktu untuk

mendatangi tempat tersebut dan tidak membawa bukti yang nyata.

Maka dari itu penulis mendapatkan ide untuk membuat sebuah aplikasi berbasis

android yaitu sebuah Perancangan Aplikasi Pengaduan Masyarakat di Kecamatan

Secanggang Menggunakan Android. Penulis merencanakan pembuatan aplikasi

hanya digunakan untuk masyarakat Kecamatan Secanggang. Pada aplikasi ini,

masyarakat dapat memberikan laporan dengan cepat disertai dengan bukti seperti

foto, video, atau dokumen.


2

1.2 Rumusan Masalah

Atas dasar identifikasi masalah yang telah dipaparkan diatas, maka penulis

merumuskan permasalahan sebagai berikut :

1. Bagaimana merancang sebuah aplikasi yang efektif dan efisien untuk

melaporkan kejadian dan memberikan informasi yang terjadi di masyarakat

secara online dan real time.

2. Bagaimana merancang sebuah sistem yang dapat memudahkan admin dalam

mengolah data

3. Bagaimana merancang sebuah aplikasi yang dapat melakukan pemantauan dari

setiap pelaporan kejadian.

1.3 Batasan Masalah

Dalam merancang aplikasi ini ada beberapa batasan masalah diantaranya :

1. Aplikasi ini hanya digunakan untuk smartphone berbasis android.

2. Aplikasi ini dibangun menggunakan Bahasa pemrograman java

3. Database yang digunakan pada aplikasi ini dibangun menggunakan MySQL.

4. Aplikasi ini bersifat online karena digunakan untuk masyarakat umum.

Aplikasi ini digunakan untuk melaporkan kejadian untuk masyarakat dan

mengolah data untuk admin.

1.4 Tujuan Penelitian

Dalam penyusunan tugas akhir ini tujuan yang hendak di capai dalam Aplikasi

Pengaduan Masyarakat di Kecamatan Secanggang Menggunakan Android ini adalah

1. Membuat aplikasi online yang lebih efektif dan efisien dalam melakukan

pelaporan kejadian yang terjadi di lingkungan masyarakat Desa Secanggang.

2. Merancang sebuah sistem yang dapat memudahkan admin dalam memanajemen

data.

3. Merancang sebuah aplikasi yang dapat melakukan pemantauan atau

pengontrolan terhadap laporan kejadian yang diberikan masyarakat.


3

1.5 Manfaat Penelitian

Manfaat yang diperoleh dari Aplikasi Pengaduan Masyarakat di Desa Secanggang

Menggunakan Android ini adalah :

1. Memberikan kemudahan kepada masyarakat dalam melaporkan kejadian dan

memberikan informasi kepada pihak yang terkait.

2. Memberikan kemudahan kepada admin dalam mengolah data.

3. Adanya pemantauan dari hasil laporan kejadian.

1.6 Metodologi Penelitian

Dalam menyusun tugas akhir ini penulis melakukan penerapan metode penelitian

dalam memperoleh data-data yang dibutuhkan sehingga penyusunan tugas akhir ini

dapat diselesaikan dengan baik. Adapun metode penelitian yang dilakukan adalah

model prototype. Berikut adalah tahapan-tahapan proses pengembangan dalam

model prototype, yaitu :

a. Pengumpulan kebutuhan

Pada tahapan ini pengembang dan pengguna bersama-sama mendefenisikan

format seluruh perangkat lunak, mengidentifikasi semua kebutuhan dan garis

besar sistem yang akan dibuat.

b. Membangun Prototyping

Di tahapan ini yang dilakukan adalah membuat perencanaan sementara yang

berfokus pada penyajian kepada pelanggan misalnya untuk merancang input

dan output

c. Evaluasi Prototyping

Evaluasi ini dilakukan oleh pelanggan, apakah prototyping yang sudah

dibangun sudah sesuai dengan keinginan pelanggan atau belum. Jika sudah

sesuai, maka langkah selanjutnya akan diambil. Namun jika tidak, prototyping

direvisi dengan mengulang langkah-langkah sebelumnya.

d. Mengkodekan sistem

Dalam tahap ini prototyping yang sudah di sepakati diterjemahkan ke dalam

bahasa pemrograman yang sesuai.


4

e. Menguji sistem

Setelah sistem sudah menjadi suatu perangkat lunak yang siap pakai, kemudian

dilakukan proses Pengujian. Pengujian ini dilakukan dengan Black Box.

f. Evaluasi sistem

Pelanggan mengevaluasi apakah perangkat lunak yang sudah jadi sudah sesuai

dengan yang diharapkan . Jika ya, maka proses akan dilanjutkan ke tahap

selanjutnya, namun jika perangkat lunak yang sudah jadi tidak/belum sesuai

dengan apa yang diharapkan, maka tahapan sebelumnya akan diulang.

g. Menggunakan sistem

Perangkat lunak yang telah diuji dan diterima pelanggan siap untuk digunakan.

1.7 Sistematika Penulisan

Agar dapat memberikan gambaran yang jelas pada penulisan tugas akhir ini,

maka penulis membaginya dalam beberapa bab sebagai berikut :

BAB 1 : PENDAHULUAN

Bab ini menguraikan tentang latar belakang pembangunan aplikasi,

perumusan masalah, batasan masalah, tujuan penelitian, manfaat

penelitian, metodologi penelitian, hingga sistematika penulisan tugas

akhir ini.

BAB 2 : LANDASAN TEORI

Bab ini menguraikan tentang teori-teori dasar dalam pembangunan

aplikasi android ini. Mulai dari pengertian Android serta apa-apa

saja yang dibutuhkan untuk memulai pemrograman mobile android.


5

BAB 3 : ANALISIS DAN PERANCANGAN SISTEM

Bab ini menguraikan mengenai analisis dan perancangan sistem

mulai dari perancangan layout, diagram konteks sistem, hingga

flowchart sistem

BAB 4 : IMPLEMENTASI SISTEM

Bab ini menguraikan tentang bagaimana proses lanjutan dari

perancangan sistem.

BAB 5 : KESIMPULAN DAN SARAN

Bab ini menguraikan tentang kesimpulan dan saran yang dikutip oleh

penulis selama proses pembangunan aplikasi.


BAB 2

TINJAUAN PUSTAKA

2.1 Sistem Operasi Android

Sejarah sistem operasi Android dimulai sejak diumumkannya Open Handset

Alliancedi akhir tahun 2007. Sebenarnya ide untuk membuat sistem operasi open

source untuk peranti embedded sudah ada sejak lama. Karena backing dari Google

yang sangat agresiflah, maka Android bisa sangat terkenal hanya dalam beberapa

tahun saja. Beberapa perusahaan telekomunikasi, kini mulai memiliki atau

menawarkan perangkat android dalam produk-produknya. Tidak hanya ponsel, tapi

perangkat lain seperti tablet, netbook, televise, bahkan hingga ke peranti embedded

di mobile memiliki sistem operasi android. Sebenarnya android pada awalnya tidak

dikembangkan oleh google, tapi dikembangkan oleh google, tapi dikembangkan oleh

sebuah perusahaan bernama Android Inc. Karena google melihat banyaknya user

yang online dengan perangkat mobile maka google mengira bahwa perangkat mobile

ini memiliki masa depan yang cerah. Sehingga Android Inc dikuasaioleh Google di

tahun 2005. Pada waktu yang sama, Apple di tahun 2007 juga mengembangkan

sebuah sisteem operasi iOS untuk iPhone-nya dengan fitur-fitur yang sangat inovatif

seperti multitouchdan adaya open marker untuk aplikasi.

Menurut buku karya Alfa Satyaputra dan Eva Maulina Aritonang yang

berjudul “Beginning Android Programming with ADT Bundle” (2014), android

adalah sebuah sistem operasi untuk smartphone dan tablet. Dimana sistem operasi ini

dapat diilustrasikan sebagai jembatan antara piranti dan penggunanya, sehingga

pengguna bisa berinteraksi dengan devicenya dan menjalankan aplikasi-aplikasi yang

tersedia pada device.

Android menyediakan platform terbuka bagi para pengembang untuk

menciptakaan aplikasi mereka. Awalnya, Google Inc, memberi Android Inc. yang

merupakan pendatang baru untuk urusan peranti lunak smartphone. Kemudian, untuk

mengembangkan Android dibentuklah Open Handset Alliance, sebuah konsorsium

dari 34 perusahaan peranti keras, peranti lunak, dan telekomunikasi, termasuk

Google, HTC, Intel, Motorola, Qualcomm, T-Mobile, dan Nvidia.


7

2.2 Platform Android

Platform adalah teknologi yang digunakan sebagai dasar atas mana aplikasi

yang lainnya, proses atau teknologi yang dibangun. Pada komputer pribadi, platform

adalah perangkat lunan dasar atau computer itu sendiri dan perangkat lunak atau

sistem operasi yang mana perangkat lunak lainnya bisa berjalan.

Android diuji sebagai platform mobile pertama yang lengkap, terbuka, dan

bebas. Para desainer dapat melakukan pendekatan yang komprehensif ketika mereka

sedang mengembangkan platform android dalam membangun perangkat lunak dan

memungkinkan untuk peluang pengembangan aplikasi.

Platform android disediakan melalui lisensi open source. Pengembang dapat

dengan bebas untuk mengembangkan aplikasi yang menggunakan linux kernel 2.6

ini.

Android adalah aplikasi yang bebas untuk dikembangkan. Tidak ada lisensi

atau biaya royalty untuk dikembangkan pada platform android ini. Tidak ada biaya

keanggotaan yang diperlukan. Tidak ada biaya pengujian, bahkan tidak ada kontrak

yang diperlukan. Aplikasi untuk android dapat didistribusikan dan diperdagangkan

dalam bentuk apapun.

Dalam hal ini, android dibangun atas dasar sistem operasi linux yang bersifat

open source. Android memilih linux sebagai dasar pembuatannya dikarenakan linuk

memilki probabilitas yang baik, sistem keamanan yang bagus serta fitur-fitur

menarik.

Linux merupakan sisteem operasi dengan kemanan yang tinggi. Android

mengandalkannya karena keamanan yang dimiliki linux tersebut. Seluruh aplikasi

android berjalan sesuai dengan proses-proses linux. Linux hadir dengan banyak fitur

yang bermanfaat. Android mengambil banyak manfaatnya, seperti dukungan

manajemen memori, manajemen power, dan jaringan (Gargenta, 2011).

2.3 Java

Java menurut defenisi dari Sun adalah nama untuk sekumpulan teknologi untuk

membuat dan menjalankan perangkat lunak pada computer standalone ataupun pada


8

lingkungan jaringan. Java dikembangkan pada bulan Agustus 1991, dengan nama

semula Oak. Pada Januari 1995, karena nama Oak dianggap kurang komersial, maka

diganti menjadi Java. Pada Desember 1998, Sun memperkenalkan nama “Java 2”

(J2) sebagai generasi kedua dari Java Platform. Konvensi nama baru ini diterapkan

untuk semua edisi Java yaitu Standard Edition (J2SE), Enterprise Edition (J2EE),

dan Micro Edition (J2ME). Ada tiga platform Java yang telah didefenisikan, yang

masing-masing diarahkan untuk tujuan tertentu dan untuk lingkungan yang berbeda-

beda, yaitu sebagai berikut :

1. Standart Edition (J2SE), merupakan inti dari Bahasa pemrograman java. J2SE

di desain untuk jalan pada computer desktop dan computer workstation.

2. Enterprise Edition (J2EE). Dengan built-in mendukung untuk services. JSP

dan XML, edisi ini ditunjukkan untuk aplikasi berbasis server.

3. Micro Edition (J2ME). Di desain untuk piranti dengan memori terbatas, layar

display terbatas dan power pemrosesan yang juga terbatas.

Bahasa pemrograman Java mendukung multithreading, artinya program dapat

dibuat untuk dijalanka oleh thread tertentu. Beberapa thread (baik yang menjalankan

program java ataupun program lain) dapat dijalankan secara bersam-sama.

2.5 Android Studio

Android Studio adalah Lingkungan Pengembangan Terpadu - Integrated

Development Environment (IDE) untuk pengembangan aplikasi Android,

berdasarkan IntelliJ IDEA. Selain merupakan editor kode IntelliJ dan alat

pengembang yang berdaya guna, Android Studio menawarkan fitur lebih banyak

untuk meningkatkan produktivitas Anda saat membuat aplikasi Android, misalnya:

1. Sistem versi berbasis Gradle yang fleksibel

2. Emulator yang cepat dan kaya fitur

3. Lingkungan yang menyatu untuk pengembangan bagi semua perangkat Android

4. Instant Run untuk mendorong perubahan ke aplikasi yang berjalan tanpa membuat

APK baru

5. Template kode dan integrasi GitHub untuk membuat fitur aplikasi yang sama dan

mengimpor kode contoh


9

6. Alat pengujian dan kerangka kerja yang ekstensif

7. Alat Lint untuk meningkatkan kinerja, kegunaan, kompatibilitas versi, dan

masalah-masalah lain

8. Dukungan C++ dan NDK

9. Dukungan bawaan untuk Google Cloud Platform, mempermudah pengintegrasian

Google Cloud Messaging dan App Engine.

Android Studio direncanakan untuk menggantikan Eclipse ke depannya

sebagai IDE resmi untuk pengembangan aplikasi Android. Sebagai pengembangan

dari Eclipse, Android Studio mempunyai banyak fitur-fitur baru dibandingkan

dengan Eclipse IDE. Berbeda dengan Eclipse yang menggunakan Ant, Android

Studio menggunakan Gradle sebagai build environment.

2.6 Database MySQL

Database adalah sekumpulan data-data yang disusun sedemikian rupa

sehingga membentuk informasi yang sangat berguna. Database terbentuk dari

sekelompok data-data yang memilki jenis/sifat yang sama. Ambil contoh, data-data

berupa nama-nama, kelas-kelas, alamat-alamat. Semua data tesebut dikumpulkan

menjadi satu menjadi kelompok data baru, sebut saja sebagai data-data mahasiswa.

Demikian juga, kumpulan dari data-data mahasiswa, data-data dosen, data-

data kenangan dan lainnya dapat dikumpulkan lagi menjadi kelompok besar,

misalkan data-data politeknik eletronika. Bahkan dalam perkembangannya, data-data

tersebut dapat berbentuk berbagai macam data, misalkan dapat berupa program,

lembaran-lembaran untuk memasukkan data, laporan-laporan. Keseluruhannya dapat

dikumpulkan menjadi satu yang disebutkan dengan database. Salah satu Bahasa

database yang popular adalah SQL.

MySQL biasa dibaca mal-es-ki-el atau mal-se-kuel adalh suatu perangkat

lunak database relasi (Relational Database Management System atau RDBMS)

seperti halnya Oracle, Postgresql, MS SQL, dan lainnya.

SQL atau singkatan dari Structured Query Language adalah suatu sintaks

perintah-perintah tertentu atau Bahasa pemrograman yang digunakan untuk megelola


10

suatu database. Jadi, MySQL dan SQL tidaklah sama. Singkatnya, MySQL adalah

perangkat lunaknya dan SQL adalah Bahasa Bahasa perintahnya.

Ketika dibandingkan antara MySQL dengan sistem database yang lain, maka

perlu difikirkan apa yang paling penting sesuai dengan kebutuhan. Apakah tampilan,

support, fitur-fitur SQL, kondisi keamanan dalam lisensi atau masalah harga. Dengan

pertimbangan tersebut, MySQL memiliki banyak hal yang bisa ditawarkan antara

lain:

a. Berdasarkan kecepatannya, banyak ahli memberikan pendapat bahwa MySQL

merupaka server tercepat.

b. MySQL, memili platform tinggi namun merupakan database yang simple

sehingga mudah di setup dan dikonfigurasi.

c. MySQL, cenderung gratis untuk penggunan tertentu.

d. MySQL, mengerti Bahasa SQL, (Structured Query Language) yang merupakan

pilihan sistem database secara simultan.

e. Database MySQL dapat diakses dari semua tempat di internet dengan hak akses

tertentu.

f. MySQL dapat berjalan dalam banyak varian Unix dengan baik, sebaik seperti

saat berjalan di sistem non-Unix.

g. MySQL mudah didapatkan dan memiliki source code yang boleh disebarluaskan

sehingga bisa dikembangkan lebih lanjur.

h. Dapat dikonveksikan pada bahasaa C, C++, Java, Perl, PHP dan Python.

Jika hal-hal diatas ialah kelebihan yang dimilki oleh MySQL, maka MySQL juga

memiliki kekurangan seperti :

a. Untuk koneksi ke Bahasa pemrograman visual seperti visual basic, Delphi dan

foxpro, MySQL kurang mendukung. Karena koneksi ini menyebabkan field

yang dibawa harus sesuai dengan koneksi dari program visual tersebut. Dan ini

yang menyebabkan MySQL jarang dipakai dalam program visual.

2.7 XAMPP Control Panel

XAMPP merupakan tool yang menyediakan paket perangkat lunak ke dalam

satu buah paket. Dengan menginstall XAMPP maka tidak perlu lagi melakukan


11

instalasi dan konfigurasi web server Apache, PHP dan MySQL secara manual.

XAMPP akan menginstalasi dan mengkonfigurasikannya secara otomatis untuk anda

atau auto konfigurasi. Anda bisa mendownload aplikasi xampp di

//www.apachefriends.org/en/xampp-window.html.

2.8 PHP Hypertext Preprocessor

Menurut dokumen resmi PHP, PHP adalah singkatan dari PHP Hypertexg

Prepocessor. Ia merupakan Bahasa pemrograman yang berbentuk skrip yang

ditempatkan didalam server dan diproses di server. Hasilnya lah yang akan

dikirimkan ke klien, tempat pemakai menggunakan browser.

2.9 Flowchart

Flowchart merupakan bagan atau gambar yang memperlihatkan hubungan

antar proses beserta instruksinya, gambaran ini dinyatakan dengan symbol yang

mana tiap-tiap simbol mewakili proses tertentu. Sedangkan hubungan antar-proses

digambarkan dengan garis-garis.

Flowchart merupakan langkah awal pembuatan program. Setelah flowchart

selesai disusun, selanjutnya pemrogram menerjemahkannya ke dalam bentuk

program menggunakan Bahasa pemrogramana. Berikut ini adalah simbol-simbol

standar pada sebuah flowchart berserta fugnsinya.

Tabel 2.1. Simbol Flowchart (erepo.unud.ac.id)

No Nama Simbol Fungsi

1 Terminator

Digunakan untuk

mewakili simbol

start dan end

2 Arrow Menunjukkan

alur proses


12

3 Rectangle

Menunjukkan

langkah

pemrosesan

4 Trapezium

Simbol untuk

input-output

5 Document Digunakan untuk

mewakili output

6 Decision

Simbol yang

berfungsi untuk

menyatakan

keputusan

7 Preparation

Simbol yang

berfungsi untuk

proses inisialisasi

atau pemberian

harga awal

8 Connector

Simbol untuk

keluar-masuk

atau

penyambungan

peoses pada

halaman yang

berbeda

9 Manual input

Simbol untuk

memasukkan

data secara

manual melaui

keyboard


13

10 Manual

operation

Simbol yang

menunjukkan

pengolahan yang

tidak dilakukan

oleh computer

11 Predefine process

Simbol untuk

pelaksanaan

suatu bagian

12 Display

Simbol yang

menyatakan

peralatan output

yang digunakan

seperti layar,

printer, plotter

dan sebagainya

13 Magnetic disk

Simbol yang

digunakan untuk

pemyimpanan

data ke database

14 Storage Data

Simbol yang

menyatakan

input yang

berasal dari disk

atau disimpan ke

disk


14

2.10 Tinjauan Literatur

Beberapa aplikasi yang menjadi referensi dalam pembuatan Aplikasi Pengaduan

Masyarakat yaitu:

1. ALPUKAT (Aplikasi Pengaduan Masyarakat Untuk Melaporkan Kejadian

Pungutan liar di Kabupaten Kudus Berbasis Android) oleh Iman Ardhi Prabowo dari

Universitas Maria Kudus. Dimana dalam Penelitian yang dilakukan oleh penulis

bertujuan untuk membuat aplikasi yang mampu melaporkan terjadinya pungutan liar

di Kabupaten Kudus dan diperuntukkan hanya kepada masyarakat Kapubaten Kudus.

2. Aplikasi Layanan Pengaduan Masyarakat Berbasis Android dan Web Service oleh

Andi Jumardi dan Achmad Solichin. Dimana dalam penelitian yang dilakukan

penulis bertujuan untuk menyampaikan keluhan-keluhannya terhadap masalah

sampah yang ada di lingkungan sekitarnya.


BAB 3

METODE PENELITIAN, ANALISIS DAN PERANCANGAN SISTEM

3.1 Metode Penelitian

Metode yang digunakan dalam penelitian ini adalah metode Systems

Development Life Cycle model prototype dimana metode ini merupakan suatu

paradigma baru dalam metode pengembangan perangkat lunak yang tidak hanya

sekedar evolusi dalam dunia pengembangan perangkat lunak tetapi juga merevolusi

metode pengembangan perangkat lunak yang lama yaitu sistem sekuensial yang

biasa dikenal dengan nama SDLC (Systems Development Life Cycle ).

Analisi kebutuhan user

Membuat prototype

Menyesuaikan

prototype dengan

keinginan user

Mengunakan Prototipe

sesuai

tidak

Gambar 3.1. Model Prototype

Pengembang menggunakan metode model ini dikarenakan perangkat lunak

yang dihasilkan, dipresentasikan kepada pelanggan dan pelanggan akan memberikan

masukan sehingga perangkat lunak yang dihasilkan sesuai dengan yang diinginkan

oleh pelanggan. Ada beberapa langkah dalam membangun Aplikasi Pengaduan

Masyarakat di Kecamatan Secanggang menggunakan model Prototype yaitu sebagai

berikut :


16

a. Pengumpulan kebutuhan

Kebutuhan pelanggan yang diidentifikasi :

1. Aplikasi yang dibuat dikhususkan untuk pelaporan penggunaan dana dan

bagaimana perkembangan dari setiap penggunaan dana desa di kecamatan

Secanggang.

2. Laporan dari perkembangan dilaporkan dalam bentuk persentase.

3. Adanya pelaporan kegiatan yang terjadi dilingkungan masyarakat kecamatan

Secanggang.

b. Membangun prototyping

Di tahap ini dilakukan nya perancangan input dan output. Adapun untuk

rancangan input nya adalah pengguna memberikan data diri, pengguna dapat

melaporkan kegiatan disertai dengan foto dan keterangan, untuk pelaporan dana

desa pengguna dapat mengupload file dan disertai dengan keterangan, dan

pengguna memberikan perkembangan anggaran dana dalam bentuk persentase

Untuk rancangan output nya adalah ketika pengguna telah selesai

memberikan laporan kegiatan maka hasil laporan akan ditampilkan di halaman

berita disertai dengan nama pelapor. Untuk laporan penggunaan dana hanya

admin yang bisa melihat karena laporan dana bersifat sensitive dan privasi.

c. Evaluasi prototyping

Dari tahap membangun prototyping pelanggan merasa sudah sesuai di tahap

membangun prototyping.

d. Mengkodekan sistem

Berdasarkan dari hasil prototyping di atas pengembang menggunakan aplikasi

Android Studio, Xampp, Sublime Text dan Google Chrome. Bahasa

pemrograman yang digunakan adalah Bahasa Java, PHP, JavaScript, HTML, dan

SQL.

e. Menguji sistem

Aplikasi yang telah selesai dibuat diuji menggunakan Black Box Testing.


17

f. Evaluasi sistem

Di tahap ini pelanggan menambahkan fitur yang dibutuhkan saat pelaporan

perkembangan dana yaitu kendala yang terjadi disaat penggunaan anggaran dana.

g. Menggunakan sistem

Aplikasi siap digunakan untuk masyarakat desa kecamatan Secanggang

3.2 Analisis Sistem

Analisis dapat didefinisikan sebagai proses untuk menentukan bentuk dari

kebutuhan sistem/aplikasi/alat baik berupa kebutuhan pada saat membangun maupun

pada saat Implementasi.

3.2.1 Analisis Sistem Berjalan

Sistem yang saat ini sedang berjalan di kecamatan Secanggang masih

sederhana dan manual. Analisis sistem ini bertujuan untuk membuat sistem yang

baru agar lebih efektif dan efisien dalam melaporkan kegiatan dan penggunaan dana

desa. Berikut hasil analisis sistem yang sedang berjalan :

Tabel 3.1. Gambaran dari sistem yang sedang berjalan

Masyarakat Bagian PMP Kecamatan Secanggang

3.2.2 Analisis Sistem yang Diusulkan

Laporan dana

dan kegiatan Laporan

diterima

Laporan di

Tindak lanjuti


18

Berdasarkan hasil analisis sistem yang berjalan berikut adalah hasil dari

sistem yang diusulkan :

Table 3.2. Gambaran dari sistem yang diusulkan

User Admin

3.3 Perancangan Sistem

Membangun sebuah aplikasi pada umumnya akan di awali oleh perancangan

sistem terlebih dahulu. Dimana perancangan sistem adalah sebuah proses yang secara

garis besar meliputi langkah-langkah operasi dalam proses pengolahan data dan

prosedur untuk mendukung operasi sistem.

Login/Daftar

Melaporkan

kegiatan/penggunaa

n anggaran

Simpan ke

database

Menampilkan

hasil kegiatan

Login

Melihat hasil

laporan kegiatan

& penggunaan

Memberikan

perkembangan &

kendala anggaran

dana

Meminta

perkembangan dari

penggunaan

Mengelola hasil laporan

kegiatan/penggunaan

anggaran


19

3.3.1 Flowchart Program Aplikasi User

Berikut adalah alur flowchart Aplikasi User untuk aplikasi yang dibangun :

mulai

Input

username dan

password

login

Login sah

Form register

Input

data

register

user

konten

Input

pilihan

menu

Kegiatan

umum

Visual dana

progress

about

Input file, alamat,

dan deskripsi

kegiatan

Input nama

pelapor,file, nama

laporan, desa,

alamat, deskripsi

Input nama

laporan,

perkembangan

dan kendala

upload

upload

upload

kegiatan

dana

Aplikasi keluar end

A

A

A

A

Ya

Ya

Tidak

Ya

Ya

Ya

Tidak

Tidak

Tidak

Ya

Ya

Ya

Tidak

Tidak

Tidak

Tidak

Informasi

aplikasi

Tidak

Ya

Gambar 3.1. Flowchart Aplikasi User


20

3.3.2 Flowchart Admin

Berikut adalah alur flowchart Admin untuk aplikasi yang dibangun :

Mulai

Login

Logih Sah

Input menu

pilihan

Ya

Tidak

Data

Anggota

Data

laporan

Logout

Home

Daftar

nama

anggota

Data laporan

kegiatan

Data laporan

dana

Daftar data

laporan

kegiatan

Daftar data

laporan

kegiatan

Ya

Ya Ya

Ya

Tidak

Tidak

Tidak

Tidak

Ya

Tidak

Tidak

Gambar 3.2. Flowchart Admin

Dari bagan flowchart diatas tampak bahwa pengguna dapat melakukan

beberapa hal melalui mobile. Dimulai dari flowchart aplikasi user, apabila ingin

melaporkan suatu kegiatan atau melaporkan suatu penggunaan anggaran dana user

harus login terlebih dahulu jika user sudah memiliki akun atau pernah login

sebelumnya tetepi apabila sebaliknya maka user haru registrasi terlebih dahulu

seperti yang tertera di flowchart. Setelah login maka user bisa mengirimkan

laporannya menggunakan aplikasi Quick Report dan user diminta untuk mengisi

form laporan yang akan dikirim kan.

Sementara di flowchart admin berisi data-data user, data hasil laporan dari

user dan admin juga bisa menghapus hasil laporan dari user jika laporan tersebut

tidak pantas ditampilkan di content.


21

3.3.3 Diagram Konteks Sistem

Berikut adalah diagram konteks dari aplikasi Quick Report. Diagram konteks

ini hanya menampilkan entitas yang terdapat dalam aplikasi tersebut yakni admin,

user dan sistem.

0.

Sistem Aplikasi

Quick ReportUser Admin

Data_user

Data_hasil_laporan_kegiatann

Data_hasil_laporan_penggunaan_danadesa

Hasil_perkembangan&kendala

Data_user

Upload_kegiatan

Upload_penggunaan_dana

Input

perkembangan&kendala

Berita_KegiatanPerkembangan&kenda

la

Gambar 3.3. Diagram Konteks Sistem

3.3.4 Data Flow Diagram (DFD) level 0

Diagram flow diagram digunakan untuk menggambarkan sistem sebagai yang

dihubungkan satu sama lain dengan alur data, baik secara manual maupun

terkomputerisasi. Berikut adalah data flow diagram dari aplikasi quick report:

1.0

Register

2.0

Login

3.0

Upload Laporan

4.0

Mengolah

user admin

user

Data_diri

akun

Informasi_lapor

an_kegiatan

Upload_laporan

Data_valid

Data_admin

Username&

password

Data_user

Cek_data_user

data_valid

Cek_data_admin

d2. AdminData_valid

Data_valid

laporan_kegiatan

Data_dana

Data_dana

Data_kegiatan

Data_laporan_

kegiatan&dana

Data_kegiatan

d4. dana

d3. kegiatan

d1. user

Gambar 3.4. Data Flow Diagram


22

3.4 Perancangan Database

Perancangan database adalah proses untuk menentukan isi dan pengaturan data

yang dibutuhkan untuk mendukung berbagai rancangan sistem. Perancangan

database juga merupakan salah satu langkah untuk menentukan file database, tabel,

tipe, dan ukuran dari data yang digunakan.

3.4.1 Perancangan Database Secara Logika

Dalam perancangan login system database ada beberapa data yang diperlukan. Data-

data tersebut berupa :

a. Data user

b. Data admin

c. Data laporan kegiatan

d. Data laporan penggunaan dana

3.4.1.1 Normalisasi

Normalisasi merupakan suatu teknik pengelompokan atribut dari suatu relasi

sehingga membentuk struktru relasi yang baik. Ada beberapa tahapan dalam

melakukan normalisasi yaitu normal pertama, normal kedua, dan normal ketiga.

a. Unnormal Form

Tabel 3.3. Normal Form

Nama_user Username Jabatan

Asal_desa No_hp Username_admin

Desa Password_admin Nama_pelapor

File Nama_laporan Alamat kegiatan

Desa Deskripsi Perkembangan

Kendala Nama_pelapor File

Username

admin

Jabatan admin Desa

Alamat user Deskripsi

kegiatan

Nama Laporan


23

b. Proses normalisasi pertama (1st Normal Form)

Tabel 3.4. Proses 1nf (1st normal form)

Nama_user Username Jabatan

Asal_desa No_hp Username_admin

Desa Password_admin Nama_pelapor

File Nama_laporan Alamat

Desa Deskripsi Perkembangan

Kendala Nama_pelapor File

Alamat Deskripsi

kegiatan

c. Proses normalisasi kedua (2nd

Normal Form)

Table 3.5. Entitas User

Id PRI

Username

Nama_lengkap

Password

Jabatan

Alamat

Asal_desa

No_hp

Table 3.6. Entitas dana

Id PRI

Nama_pelapor

File

Nama_laporan

Desa

Alamat

Deskripsi

Perkembangan

Kendala

Tabel 3.6.Entitas Kegiatan

Id PRI

Nama_pelapor

File

Alamat

Deskripsi

Tabel 3.7. Entitas Admin

Username

Password PRI


24

d. Proses normalisasi ketiga (3rd

normal form)

Gambar 3.5. Proses 3nf (3rd

normal form)

3.4.1.2 Entity Relationship Diagram (ERD)

Entity Relationship Diagram merupakan notasi grafis dalam pemodelan data

konseptual yang mendeskripsikan hubungan antara penyimpanan. Berdasarkan hasil

normalisasi yang telah dilakukan berikut Entity Relation Diagram dari aplikasi

quickreport :


25

user

alamat

password

username

Asal_desa

No_hp

jabatan

Nama_lengkap

id

kegiatan

id Nama_lengkap

alamat

filedeskripsi

dana

kendala

deskripsifile

desa

Nama_laporan id

Nama_pelaporperkembangan

admin

username

password

melaporkan

mengelola

mengelola

alamat

1

N

N

1

1

N

N

melaporkan1

Gambar 3.6. Entity Relationship Diagram

3.4.2 Perancangan Database Secara Fisik

Database yang digunakan adalah phpMyAdmindan Bahasa yang digunakan untuk

mengolah database adalah Structure Query Language(SQL).

3.4.2.1 Penentuan tipe data

a. Tabel User

Tabel 3.7. Penentuan tipe data untuk tabel user

Id PRI Int(5)

Username Varchar(15)

Nama_lengkap Varchar(30)

Password Varchar(10)

Jabatan Text

Alamat Text

Asal_desa Text

No_hp Varchar(12)


26

b. Tabel Dana

Tabel 3.8. Penentuan tipe data untuk tabel dana

Id PRI Int(5)

Nama_pelapor Varchar(15)

File Text

Nama_laporan Text

Desa Text

Alamat Text

Deskripsi Text

perkembangan Text

kendala Text

c. Tabel Kegiatan

Tabel 3.9. Penentuan tipe data untuk tabel kegiatan

Id PRI Int(5)

Nama_pelapor Varchar(15)

File Text

Alamat Text

Deskripsi Text

d. Tabel admin

Tabel 3.10. Penentuan tipe data untuk tabel admin

Username Varchar(15)

Password PRI Varchar(10)

3.6 Perancangan Antar Muka Pengguna Aplikasi

Berikut adalah bentuk rencana perancangan user interface pada aplikasi Quick

Report berbasis Andorid yang akan dibangun.

1. Tampilan Splash Screen

Splashscreen merupakan tampilan awal dari aplikasi quick report. Di

halaman splashscreen terdiri dari logo aplikasi dan progress bar. Berikut

tampilan splash screen :


27

Gambar 3.7. Tampilan Splashscreen

2. Tampilan login

Untuk tampilan login terdiri dari logo quick report dan kolom username

serta password. Berikut tampilan dari halaman login :

Gambar 3.8. Tampilan login


28

4. Tampilan Konten

Halaman konten terdiri dari berita-berita yang telah di upload. Berikut

tampilan konten :

Gambar 3.9. Tampilan Kontent

5. Tampilan Menu

Untuk halaman menu terdiri dari 4 menu yaitu lapor kegiatan umum, lapor

visual penggunaan dana, lapor progress seralan anggaran dan about. Berikut

tampilan dari menu :

Gambar 3.10. Tampilan menu


29

6. Tampilan form laporan kegiatan umum

Form laporan kegiatan umum terdiri dari kolom untuk input file, alamat

kejadian, dan deskripsi dan disertai dengan tombol upload. Berikut tampilan

dari form laporan kegiatan umum :

Gambar 3.11. Tampilan form laporan kegiatan umum

7. Tampilan form laporan penggunaan dana

Form laporan penggunaan dana terdiri dari kolom untuk memasukkan

nama laporan, upload file, desa dan deskripsi serta tombol upload. Berikut

tampilan dari form laporan penggunaan dana :

Gambar 3.12. Tampilan form laporan penggunaan dana


30

8. Tampilan form progress kegiatan dan penggunaan dana

Untuk tampilan form progress kegiatan dan penggunaan dana terdiri select

option untuk memilih nama laporan, kolom untuk perkembangan, kendala serta

tombol upload.

Gambar 3.13. Tampilan form progress kegiatan dan dana

9. Tampilan register

Tampilan register merupakan halaman untuk mendaftar akun aplikasi.

Terdiri dari kolom nama lengkap, password, username, jabatan, alamat, select

option memilih nama desa, no hp dan button daftar.

Gambar 3.14. Tampilan form register


31

10. Tampilan About

Halaman about berisi informasi tentang aplikasi quick report. Berikut

tampilan dari halaman about :

Gambar 3.15. Tampilan about

3.7 Perancangan Tampilan Antarmuka Admin

Admin aplikasi quick report menggunakan tampilan web. Berikut adalah

bentuk rencana perancangan antarmuka admin untuk aplikasi Quick Report berbasis

Andorid yang akan dibangun :

a. Halaman awal

Halaman awal untuk tampilan admin yaitu form login dan disertai dengan

logo aplikasi.

Gambar 3.16. Halaman awal admin untuk aplikasi quikc report


32

b. Halaman Utama

Halama utama admin terdiri dari home, data anggota dan data laporan serta

logout.

Gambar 3.17. Tampilan utama admin

c. Halaman data anggota

Halaman data anggota berisikan data-data pengguna yang telah mendaftar

untuk menggunakan aplikasi.

Gambar 3.18. Halaman untuk melihat data anggota

d. Halaman data laporan kegiatan

Halaman data laporan kegiatan memiliki 2 pilihan menu dropdown yaitu

menu kegiatan dan menu dana.


33

Gambar 3.19. Halaman untuk melihat data laporan kegiatan

e. Halaman data laporan dana

Halaman data laporan dana berisikan data-data yang telah di upload oleh

pengguna aplikasi

Gambar 3.20. Halaman untuk melihat data laporan dana

f. Halaman logout

Untuk halaman logout, jika diklik button logout makan akan berpindah ke

halaman awal yaitu form login.


34

Gambar 3.21. Halaman Logout


BAB IV

HASIL DAN PEMBAHASAN

4.1 Hasil dan Pembahasan

Implementasi dari perancangan yang telah dilakukan terdiri dari implementasi

database dan implementasi tampilan antarmuka aplikasi pengguna dan admin.

4.1.1 Implementasi Database

Implementasi basis data menggunakan Apache, PHP, SQL, dan MySQL.

Apache digunakan sebagai web server, PHP digunakan sebagai perangkat luak

pengembang, SQL merupakan Bahasa yang digunakan untuk membangun basis data

dan MySQL sebagai perangkat lunak untuk membangun basis data.

a. Database

Database diberi nama quickreport. Terdiri dari 4 tabel yaitu tabel admin, tabel

dana, tabel kegiatan, dan tabel user.

Gambar 4.1. Tampilan awal database quickreport


36

b. Tabel admin

Tabel admin terdiri dari dua fieldyaitu username dan password, dimana

password dijadikan sebagai Primary Key.

Gambar 4.2. Tampilan tabel admin

c. Tabel dana

Tabel dana terdiri dari 9 field yaitu id, nama pelapor, file, nama laporan, alamat,

desa, deskripsi, perkembangan, dan kendala. Di tabel dana, id dijadikan sebagai

Primary Key.

Gambar 4.3. Tampilan tabel dana

d. Tabel kegiatan

Tabel kegiatan terdiri dari 5 field, yaitu id, nama pelapor, file, alamat, dan

deskripsi. Di tabel kegiatan, id dijadikan sebagai Primary Key.

Gambar 4.4. Tampilan tabel kegiatan


37

e. Tabel user

Tabel user terdiri dari 8 field yaitu id, username, nama lengkap, password,

jabatan, alamat, asal desa, dan no hp. Di tabel user, id dijadikan sebagai Primary

Key. Semua data-data user yang melakukan registrasi untuk menggunakan aplikasi

disimpan di tabel user.

Gambar 4.5. Tampilan tabel user

4.1.2 Implementasi Tampilan Antarmuka Pengguna

Implementasi dari aplikasi quickreport terdiri dari beberapa form yang

mempunyai kegunaan masing-masing. Form-form tersebut akan tampil secara

beruntun sesuai dengan urutan yang telah terprogram.

a. Splashscreen

Splashscreen merupakan tampilan awal dari aplikasi quick report. Berikut

tampilan splashscreen :


38

Gambar 4.6. Tampilan awal aplikasi quickreport

b. Form login

Form login user agar dapat menggunakan aplikasi quick report. Username dan

password diisi sesuai dengan yang telah diregistrasikan. Jika user belum memiliki

akun, maka dapat memilih kata daftar untuk melakukan registrasi. Berikut tampilan

dari form login :

Gambar 4.7. Form login


39

c. Halaman konten

Halaman konten berisi berita-berita yang telah di upload sebelum nya. Untuk

setiap berita yang diupload berisikan nama pelapor, alamat, dan keterangan dari

berita tersebut. Berikut tampilan halaman konten :

Gambar 4.8. Halaman berita

d. Halaman menu

Halaman menu berisi menu untuk lapor kegiatan umum, menu lapor visual

penggunaan dana, menu lapor progress serapan anggaran, dan menu about.

Berikut tampilan dari halaman menu :


40

Gambar 4.9. Halaman menu

e. Halaman lapor kegiatan

Halaman lapor kegiatan terdiri dari 3 kolom yang wajib diisi, yaitu upload

foto/video, alamat kejadian, dan deskripsi. Dimana, jika laporan kegiatan telah

di upload akan di tampilkan di halaman konten.

Gambar 4.10. Halaman lapor kegiatan umum


41

f. Halaman lapor penggunaan dana

Halaman lapor penggunaan dana berisi 5 kolom yang wajib diisi yaitu nama

laporan, upload file, pilih desa, dan deskripsi.

Gambar 4.11. Halaman lapor penggunaan dana desa

Untuk kolom upload file hanya diisi dengan file berbentuk document. Laporan

yang telah diupload akan disimpan di database dan tidak ditampilkan karena bersifat

privasi.

g. Halaman lapor progress dana desa

Halaman ini digunakan untuk melaporkan perkembangan dan kendala dari setiap

penggunaan dana desa berdasarkan nama laporan yang telah di upload sebelumnya.

Untuk kolom perkembangan diisi dengan persentasi. Berikut tampilan dari halaman

lapor progress dana desa :


42

Gambar 4.12. Halaman lapor progress dana desa

h. Halaman About

Halaman ini berisikan tentang kegunaan dari aplikasi dan bagaimana cara

menggunakan aplikasi quick report. Berikut tampilan halaman about :

Gambar 4.13. Halaman About


43

i. Form daftar akun

Halaman ini digunakan untuk user yang belum memiliki akun sebelumnya. Ada

7 kolom yang wajib diisi untuk melakukan registari akun. Berikut tampilan dari

form daftar akun :

Gambar 4.14. Form daftar akun

4.1.3 Impelementasi Tampilan Antarmuka Admin

Antarmuka admin menggunakan tampilan website agar mempermudah admin

dalam mengolah data laporan. Implementasi antarmuka admin dari aplikasi

quickreport terdiri dari beberapa halaman yang mempunyai kegunaan masing-

masing. Halaman-halaman tersebut akan tampil secara beruntun sesuai dengan

urutan yang telah terprogram.


44

a. Halaman awal

Berikut tampilan awal admin untuk aplikasi quick report :

Gambar 4.15. Halaman awal admin

Halaman awal dari antarmuka admin berupa form untuk login. Jika admin

ingin melihat data-data pengguna dan laporan maka diharuskan untuk login

terlebih dahulu.

b. Halaman utama

Berikut tampilan halaman utama admin untuk aplikasi quick report :

Gambar 4.16. Halaman utama admin

Halaman utama untuk admin terdiri dari halaman home, halaman data

anggota untuk melihat data-data anggota, halaman data laporan untuk melihat

data laporan yang telah dikirim dan logout.


45

c. Halaman data anggota

Berikut tampilan halaman data anggota aplikasi quick report :

Gambar 4.17. Halaman data anggota

Halaman data anggota berisikan seluruh data-data pengguna dari aplikasi

quick report. Dimana seluruh data-data di ambil dari database quickreport tabel

user.

d. Halaman data laporan kegiatan

Berikut tampilan halaman data laporan kegiatan :

Gambar 4.18. Halaman data laporan kegiatan

Halaman ini berisikan data laporan kegiatan yang telah diupload oleh

pengguna. file yang telah di upload berupa gambar. Admin dapat mengunduh

file. File yang telah di unduh dimasukkan ke dalam folder download.


46

e. Halaman data laporan dana

Berikut tampilan halaman data laporan dana :

Gambar 4.19. Halaman data laporan dana

Halaman ini berisikan data laporan penggunaan dana yang telah di upload

oleh pengguna. File yang diunduh berupa file dalam bentuk dokumen seperti

doc, docx, ppt, pptx, xls, dan lainnya.

f. Halaman logout

Berikut tampilan halaman logut untuk aplikasi admin :

Gambar 4.20. Halaman logout

Halaman logout jika dipilih akan berpindah ke halaman awal yaitu halaman

untuk login. Admin dapat memilih halaman ini jika admin telah selesai melihat

dan mengolah data.


47

4.2 Pengujian Aplikasi

Pengujian dilakukan dalam pembangunan sistem aplikasi pengaduan

masyarakat di kecamatan Secanggang menggunakan pengujian black box. Berikut

rincian pengujian :

Tabel 4.1. Pengujian Black Box

Kelas Uji Butir Uji Jenis Pengujian

Login User Pengecekan User Terdaftar Black Box

Register Akun Data Masuk ke Database Black Box

Pengisian Data

Laporan

Pengisian Data Laporan Kegiatan

Umum

Black Box

Pengisian Data Laporan Penggunaan

Dana Desa Black Box

Pengisian Data Progress Dana Desa Black Box

4.2.1 Kasus dan Hasil Pengujian

Pengujian dilakukan dari setiap tahap kelas uji. Berikut hasil pengujian :

a. Pengujian Login User

Tabel 4.2. Pengujian Login User

Kasus dan Hasil Uji (Data Normal)

Data Masukan Yang di Harapkan Pengamatan Kesimpulan

Username:

mazdalifah

Password :

0909oi

Klik tombol

login

Form menampilkan

masuk untuk user

Dapat masuk ke

tampilan utama

berisi konten

kegiatan

Berhasil

Kasus dan Hasil Uji (Data Salah)


Username:

mazdalifah

Password:

mazda

Tidak dapat login

dan kembali ke

halaman login

Kembali ke

halaman login

Berhasil


48

b. Pengujian Register Akun

Tabel 4.3. Pengujian Register Akun



Data diisi

sesuai form

Data masuk ke

database dan bisa

login

Data masuk ke

database

Berhasil



Data tidak

lengkap diisi

Notifikasi untuk

melengkapi data di

form

Notifikasi tampil Berhasil

c. Pengujian Pengisian Data Laporan

Untuk pengujian pengisian data laporan dibagi menjadi 3 bagian, yaitu pengujian

data laporan kegiatan umum, data laporan penggunaan dana, dan laporan progress

penggunaan dana desa.

1. Pengujian Data Laporan Kegiatan Umum

Tabel 4.4. Pengujian Pengisian Data Laporan Kegiatan Umum



Data diisi

sesuai form

Data masuk ke

database dan

tampil ke halaman

konten

Data masuk ke

database dan

tampil ke

halaman konten

Berhasil



Data tidak

lengkap diisi

Notifikasi untuk

melengkapi data di

form



49

2. Pengujian Data Laporan Penggunaan Dana

Tabel 4.5. Pengujian Pengisian Data Laporan Penggunaan Dana



Data diisi

sesuai form

Data masuk ke

database

Data masuk ke

database

Berhasil



Data tidak

lengkap diisi

Notifikasi untuk

melengkapi data di

form


3. Pengujian Data Laporan Progress Penggunaan Dana Desa

Tabel 4.6. Pengujian Pengisian Data Laporan Progress Penggunaan Dana Desa



Data diisi

sesuai form

Data masuk ke

database

Data masuk ke

database

Berhasil



Data tidak

lengkap diisi

Notifikasi untuk

melengkapi data di

form


4.2.2 Kesimpulan Hasil Pengujian Aplikasi

Dari pengujian diatas dapat disimpulkan bahwa perangkat lunak yang

dibangun bebas dari kesalahan sintaks dan secara fungsional mengeluarkan hasil

yang sesuai yang diharapkan.


50

4.3 Pengujian Koresponden Pengguna

Tanggapan pengguna terhadap aplikasi pembelajaran yang diimplentasikan

dilakukan pengujian dengan memberikan 14 pertanyaan kepada 10 pengguna

(masyarakat) dimana jawaban dari pertanyaan tersebut terdiri dari tingkatan yang

dapat dipilih yaitu sebagai berikut :

Tabel 4.7. Bobot Nilai Jawaban

Jawaban Bobot

Sangat Baik 4

Baik 3

Kurang 2

Sangat Kurang 1

Adapun 14 pertanyaan yang diberikan adalah sebagai berikut :

Tabel 4.8. Pertanyaan Kuisioner

No Pertanyaan Sangat Baik Baik Kurang Sangat

Kurang

1 Kesesuaian penggunaan

warna dan desain latar

belakang

2 Kesesuaian warna tulisan

dengan latar belakang

3 Ketepatan ukuran tulisan

4 Ketepatan pemilihan jenis

tulisan

5 Kesesuaian ukuran tombol

6 Ketepatan fungsi tombol dan

menu dengan tujuan yang

diinginkan

7 Ketepatan penamaan tombol

dan menu

8 Penggunaan menu atau fitur

aplikasi mudah digunakan

9 Materi yang tersedia mudah

dipahami

10 Kemudahan pengoperasian

aplikasi

11 Kenyaman menggunakan

aplikasi secara keseluruhan

12 Aplikasi bermanfaat bagi


51

pengguna

13 Aplikasi sesuai dengan

kebutuhan

14 Penggunaan aplikasi

memuaskan

Berdasarkan pertanyaan yang telah diberikan berikut adalah jawaban dari pengguna

yang telah menggunakan aplikasi :

Tabel 4.9. Data Jawaban Kuisioner Pengguna

No Pertanyaan Sgt

Baik

Baik Krg Sgt

Krg

Jlh Presentasi

1 Kesesuaian penggunaan

warna dan desain latar

belakang

8 24 0 0 32 80%

2 Kesesuaian warna

tulisan dengan latar

belakang

16 18 0 0 34 85%

3 Ketepatan ukuran

tulisan 12 21 0 0 33 82,5%

4 Ketepatan pemilihan

jenis tulisan 20 12 2 0 34 85%

5 Kesesuaian ukuran

tombol 8 24 0 0 32 80%

6 Ketepatan fungsi

tombol dan menu

dengan tujuan yang

diinginkan

20 15 0 0 35 87,5%

7 Ketepatan penamaan

tombol dan menu 24 12 0 0 36 90%

8 Penggunaan menu atau

fitur aplikasi mudah

digunakan

28 9 0 0 37 92,5%

9 Materi yang tersedia

mudah dipahami 20 15 0 0 35 87,5%

10 Kemudahan

pengoperasian aplikasi 24 12 0 0 36 90%

11 Kenyaman

menggunakan aplikasi

secara keseluruhan

12 21 0 0 33 82,5%

12 Aplikasi bermanfaat

bagi pengguna 24 12 0 0 36 90%

13 Aplikasi sesuai dengan

kebutuhan 20 15 0 0 35 87,5%

14 Penggunaan aplikasi

memuaskan 12 21 0 0 33 82,5%


52

Berikut kriteria interpretasi skor nya :

a. Angka 0% – 24,99% = Sangat tidak (sesuai/mudah/tepat)

b. Angka 25% - 49,99% = Cukup (sesuai/mudah/tepat)

c. Angka 50% – 74,99% = Sesuai/Mudah/Tepat

d. Angka 75% - 100% = Sangat (sesuai/mudah/tepat)

Berdasarkan hasil kuisioner diatas dapat ditarik kesimpulan yaitu sebagai berikut :

a. Analisa pertanyaan pertama

Dari tabel diatas dapat dilihat bahwa jumlah nilai dari 10 responden untuk

pertanyaan pertama adalah 32 dengan nilai presentasenya 80%.

b. Analisa pertanyaan kedua


pertanyaan kedua adalah 34 dengan nilai presentasenya 85%.

c. Analisa pertanyaan ketiga


pertanyaan ketiga adalah 33 dengan nilai presentasenya 82, 5%.

d. Analisa pertanyaan keempat


pertanyaan keempat adalah 34 dengan nilai presentasenya 85%.

e. Analisa pertanyaan kelima


pertanyaan kelima adalah 32 dengan nilai presentasenya 80%.

f. Analisa pertanyaan keenam


pertanyaan keenam adalah 35 dengan nilai presentasenya 87,5%.

g. Analisa pertanyaan ketujuh


pertanyaan pertama adalah 36 dengan nilai presentasenya 90%.

h. Analisa pertanyaan kedelapan


pertanyaan kedelapan adalah 37 dengan nilai presentasenya 92,5%.

i. Analisa pertanyaan kesembilan


53


pertanyaan kesembilan adalah 35 dengan nilai presentasenya 87,5%.

j. Analisa pertanyaan kesepuluh


pertanyaan kesepuluh adalah 36 dengan nilai presentasenya 90%.

k. Analisa pertanyaan kesebelas


pertanyaan kesebelas adalah 33 dengan nilai presentasenya 82, 5%.

l. Analisa pertanyaan kedua belas


pertanyaan kedua belas adalah 36 dengan nilai presentasenya 90%.

m. Analisa pertanyaan ketiga belas


pertanyaan ketiga belas adalah 35 dengan nilai presentasenya 87,5%.

n. Analisa pertanyaan keempat belas


pertanyaan keempat belas adalah 33 dengan nilai presentasenya 82,5%.


BAB 5

KESIMPULAN DAN SARAN

5.1 Kesimpulan

Berdasarkan pembahasan dan hasil pengujian Black Box yang telah dilakukan

dalam pembuatan Aplikasi Pengaduan Masyarakat di Kecamatan Secanggang

Menggunakan Android, maka diperoleh kesimpulan sebagai berikut :

1. Aplikasi pengaduan masyarakat yang telah dirancang ini memudahkan

masyarakat untuk melaporkan kegiatan atau kejadian dan penggunaan dana desa

tanpa harus datang langsung ke kantor camat.

2. Aplikasi yang telah dirancang dapat melaporkan kegiatan atau kejadian dalam

bentuk gambar dan penggunaan dana desa dalam bentuk dokumen.

3. Admin dapat mengontrol penggunaan dana desa berdasarkan perkembangan dan

kendala yang dilaporkan.

4. Dari 10 kuisioner yang disebar kepada 10 responden sebagai survei kepuasan

aplikasi, didapatkan hasil 82,5% responden merasa puas dengan aplikasi ini.

5.2 Saran

Adapun saran yang dapat dikemukakan sehubungan dengan penelitian ini

adalah sebagai berikut :

1. Untuk mengoptimalkan Aplikasi Pengaduan Masyarakat dalam melaporkan

penggunaan dana desa sebaiknya ditambahkan fitur untuk chatting agar

memudahkan admin mengontrol setiap laporan penggunaan dana desa.

2. Diharapkan pengembangan aplikasi selanjutnya sistem dapat menindak lanjuti

setiap laporan kegiatan atau kejadian yang terjadi.


DAFTAR PUSTAKA

Arsya YP, Iman AP, Alifah N (2017) , “ALPUKAT ( Aplikasi Pengaduan

Masyarakat untuk Melaporkan Kejadian Pungutan Liar di Kabupaten Kudus

Berbasis Android )” ,https://www.researchgate.net.publication/321313475_ALPUKAT_

APLIKASI_PENGADUAN_MASYARAKAT_UNTUK_MELAPORKAN_KEJAD

IAN_PUNGUTAN_LIAR_DI_KABUPATEN_KUDUS_BERBASIS_ANDROID

( diakses pada tanggal 12 Maret 2018 ).

Wikipedia Bahasa Indonesia. 15 Januari 2001. Mengetahui Pengertian Android

Sistem Android. 21 Maret 2018.https:/id.wikipedia.org/wiki/Android

Android Developer. 25 Mei 2015. Mengetahui Pengertian Android Studio dan

Fiturnya. 21 Maret 2018. https://developer.android.com/studio/intro/index.html

Novita N. 2015. “Aplikasi Print Online Berbasis Android”. Fakultas Matematika dan

Ilmu Pengetahuan Alam. Universitas Sumatera Utara. Kota Medan


https://www.researchgate.net.publication/321313475_

https://developer.android.com/studio/intro/index.html

LISTING PROGRAM

Halaman User

activity_main.xml <?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"

android:background="#008080" tools:context="com.example.acer.tugasakhir.MainActivity">

<ImageView

android:layout_width="250dp" android:layout_height="100dp" android:src="@mipmap/satu"

android:layout_marginTop="230dp" android:id="@+id/logo"

android:layout_centerHorizontal="true"/>

</RelativeLayout>

MainActivity.java package com.example.acer.tugasakhir; import android.content.Intent; import android.os.Handler; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.WindowManager; public class MainActivity extends AppCompatActivity { public static int splashInterval=3500; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); setContentView(R.layout.activity_main); new Handler().postDelayed(new Runnable() { @Override public void run() { Intent i = new Intent(MainActivity.this, HomeScreen.class); startActivity(i); finish(); } },splashInterval); } }

activity_home_screen.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.acer.tugasakhir.HomeScreen"> <WebView


android:layout_width="match_parent" android:layout_height="match_parent" android:background="#008080" android:id="@+id/webView" android:layout_weight="1.0"> </WebView> </RelativeLayout>

HomeScreen.java package com.example.acer.tugasakhir; import android.net.Uri; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.webkit.WebChromeClient; import android.webkit.WebView; public class HomeScreen extends AppCompatActivity { WebView webView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_home_screen); webView = findViewById(R.id.webView); openBrowser(); } @SuppressWarnings("static-access") private void openBrowser(){ String a = "http://192.168.43.18/TugasAkhir1/index.php"; WebChromeClient wcc = new WebChromeClient(); webView.setWebChromeClient(wcc); webView.getSettings().setJavaScriptEnabled(true); webView.loadUrl(a); } }

index.php

<html> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <style> .logo{ width: 100%; height: 30%; } .isiform{ width: 100%; height: 70%; margin-top: 2%;


} a{ text-decoration: none; } .dftr{ color: #f5fffa; background: transparent; border: none; } input[type=text] { width: 65%; padding: 10px 10px; margin: 2px 0; box-sizing: border-box; font-size: 11pt; border: 3px solid #fff; -webkit-transition: 0.5s; transition: 0.5s; background: transparent; outline: none; } input[type=text]:focus { border: 3px solid #555; border-radius: 7px; } input[type=password] { width: 65%; padding: 10px 10px; font-size: 11pt; margin: 2px 0; box-sizing: border-box; border: 3px solid #fff; -webkit-transition: 0.5s; transition: 0.5s; background: transparent; outline: none; } input[type=password]:focus { border: 3px solid #555; border-radius: 7px; } .button { background-color: #2f4f4f; border: none; color: white;


padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; width: 65%; } </style> </head> <body bgcolor="#008080"><center> <div class="logo"> <img src="satu.png" width="20%" height="40%" style="margin-top:2.5%"></div> <center> <div class="isiform"> <form action="proses_login.php" method="POST"> <input style="text-align:center; text-color:#f5fffa" type="text" name="username" placeholder="username"><br><br> <input style="text-align:center; text-color:#f5fffa" type="password" name="password" placeholder="password"><br><br> <input class="button" type="submit" name="login" value="LOGIN"> </form> <a style="padding-top:10%">Belum punya akun?</a> <form action="daftar.php" method="POST"> <input class="dftr" type="submit" name="daftar" value="Daftar"> </form> </div> </body> </html>

Proses_login.php <?php include("koneksi.php"); $username=$_POST['username']; $password=$_POST['password']; $login=mysqli_query($koneksi,"SELECT * FROM `user` where username='$username' AND password='$password'"); $log=mysqli_fetch_array($login);


if ($log['username'] == $username AND $log['password'] == $password) { session_start(); $_SESSION['username'] = $username; include('kontent.php'); } else { include('location:index.php'); } ?>

kontent.php <?php error_reporting(0); session_start(); if (empty($_SESSION['username'])) { include('index.php'); // jika belum login, maka dikembalikan ke file form_login.php } else { ?> <html> <head> <title></title> <style type="text/css"> body{ height: 100%; width: 100%; margin: 0; padding: 0; } .header{ width: 100%; height: 10%; background-color: #008080; } .menu{ height: 100%; width: 15%; float: left; margin-top: 1%; margin-left: 2%; background: transparent; border: none; }


</style> </head> <body> <?php $n=$_SESSION['username']; ?> <div class="header"> <form action="menu.html" method="POST"> <button class="menu"><img src="menu.png" width="100%" height="55%"></button> </form> <p style="padding-top:6%;margin-left:45%;font-size:20pt;color:#ffffff; font-family:futura">BERITA</p> </div> <div class="content"> <?php include("koneksi.php"); $q="SELECT * FROM `kegiatan` ORDER BY id DESC"; $eq=mysqli_query($koneksi, $q); $no=1; while ($de=mysqli_fetch_array($eq)) { echo "<center><br><br>"; echo "".$de['nama_pelapor']."<br><br>"; echo "<img src='".$de['file']."' widht=\"70%\" height=\"30%\">"; echo "<br>"; echo "".$de['alamat'].""; echo "<br>"; echo "".$de['deskripsi'].""; echo "<br>"; } ?> </div> </body> </html> <?php } ?>

menu.html <html> <head> <title></title> <style type="text/css"> body{


height: 100%; width: 100%; margin: 0; padding: 0; background-color: #008080; } .header{ width: 100%; height: 10%; background-color: #2f4f4f; } .menu{ height: 100%; width: 15%; margin-left: 2%; background: transparent; border: none; float: left; } .btn{ background: transparent; border: none; } </style> </head> <body> <?php session_start(); if (empty($_SESSION['username'])) { header("location:index.php"); } $n=$_SESSION['username']; ?> <div class="header"> <form action="kontent.php" method="POST"> <button class="menu"><img src="home.png" widht="100%" height="55%"></button></form> <p style="padding-top:6%;margin-left:45%;font-size:20pt;color:#ffffff; font-family:futura">MENU</p> </div> <center> <a href="form-laporan-kegiatan.php"><img src="kegiatan.png" width="75%" height="8%" style="margin-top:15%"></a><br>


<a href="form-lapor-dana-desa.php"><img src="dana.png" width="75%" height="8%" style="margin-top:3%"></a><br> <a href="form-lapor-progress-dana.php"><img src="progress.png" width="75%" height="11%" style="margin-top:3%"></a><br> <form action="about.php" method="POST"> <button class="btn"><img src="cc.png" width="75%" height="8%" style="margin-top:3%"></a></button><br> </form> </body> </html>

form-laporan-kegiatan.php <html> <head> <title></title> <style type="text/css"> body{ height: 100%; width: 100%; margin: 0; padding: 0; background-color: #008080; } .header{ width: 100%; height: 10%; background-color: #2f4f4f; } .menu{ height: 100%; width: 0%; background: transparent; border: none; float: left; } input[type=text] { width: 75%; padding: 10px 10px; margin: 2px 0; box-sizing: border-box; font-size: 12pt; border: 3px solid #fff; -webkit-transition: 0.5s; transition: 0.5s; color: #fff


background: transparent; outline: none; } input[type=text]:focus { border: 3px solid #555; border-radius: 7px; } textarea{ width: 75%; padding: 10px 10px; margin: 2px 0; box-sizing: border-box; font-size: 11pt; color: #fff; border: 3px solid #fff; -webkit-transition: 0.5s; transition: 0.5s; background: transparent; outline: none; } textarea:focus { border: 3px solid #555; border-radius: 7px; } .button { background-color: #2f4f4f; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; width: 74%; } </style> </head> <body> <?php session_start(); if (empty($_SESSION['username'])) { header("location:index.php"); } $n=$_SESSION['username'];


?> <div class="header"> <form action="menu.html" method="POST"> <button class="menu"><img src="back.png" widht="50%" height="50%" style="margin-left:75%;margin-top:1.8%"></button></form> <p style="padding-top:6%;margin-left:33%;font-size:33pt;color:#ffffff; font-family:alegreya">LAPOR KEGIATAN</p> </div> <center> <form action="proses-lapor-kegiatan.php" method="POST" enctype="multipart/form-data"> <table style="margin-left:4%; margin-top:4%" width="70%"> <tr> <td style="font-size:25pt; color:#fff">Upload gambar</td> </tr> <tr> <td style="font-size:16pt"><input type="file" name="gambar" value="upload gambar" ></td> </tr> <tr> <td colspan="2"><input type="text" name="alamat" placeholder="alamat"></td> </tr> <tr> <td><textarea cols="25" rows="5" name="deskripsi" placeholder="Deskripsi Jadian"></textarea></td> </tr> <tr> <td><input class="button" type="submit" name="simpan" value="UPLOAD" width="10%"></td> </tr> </table> </form> </body> </html>

proses-lapor-kegiatan.php <?php session_start();


if (empty($_SESSION['username'])) { header("location:index.php");} include("koneksi.php"); $n=$_SESSION['username']; $gambar=$_FILES['gambar']['name']; $alamat=$_POST['alamat']; $deskripsi=$_POST['deskripsi']; $q="INSERT INTO `kegiatan` VALUES('','$n','$gambar','$alamat','$deskripsi')"; $eq=mysqli_query($koneksi, $q); move_uploaded_file($_FILES['gambar']['tmp-name'],"gambar/".$_FILES['gambar']['name']); if ($eq) { header("location:kontent.php"); } else{ echo "gagal"; } ?>

form-lapor-dana-desa.php <html> <head> <title></title> <style type="text/css"> body{ height: 100%; width: 100%; margin: 0; padding: 0; background-color: #008080; } .header{ width: 100%; height: 10%; background-color: #2f4f4f; } .menu{ height: 100%; width: 0%; float: left; background: transparent; border: none; }


input[type=text] { width: 75%; height: padding: 10px 10px; margin: 2px 0; box-sizing: border-box; font-size: 12pt; border: 3px solid #fff; -webkit-transition: 0.5s; transition: 0.5s; color: #fff; background: transparent; outline: none; } input[type=text]:focus { border: 3px solid #555; border-radius: 7px; } textarea{ width: 75%; padding: 10px 10px; margin: 2px 0; box-sizing: border-box; font-size: 11pt; color: #fff; border: 3px solid #fff; -webkit-transition: 0.5s; transition: 0.5s; background: transparent; outline: none; } textarea:focus { border: 3px solid #555; border-radius: 7px; } .button { background-color: #2f4f4f; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; width: 74%;


} .button { background-color: #2f4f4f; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; width: 74%; } </style> </head> <body> <?php session_start(); if (empty($_SESSION['username'])) { header("location:index.php"); } $n=$_SESSION['username']; ?> <div class="header"> <form action="menu.html" method="POST"> <button class="menu"><img src="back.png" widht="50%" height="50%" style="margin-left:75%;margin-top:4%"></button></form> <p style="padding-top:6%;margin-left:38%;font-size:33pt;color:#ffffff; font-family:alegreya">LAPOR DANA</p> </div> <center> <form action="proses-lapor-danadesa.php" method="POST" enctype="multipart/form-data"> <table style="margin-left:12%; margin-top:4%" width="70%" height="30%"> <tr> <td style="font-size:25pt; color:#fff">Upload gambar</td> </tr> <tr> <td><input type="text" name="namalaporan" placeholder="nama laporan" required></td>


</tr> <tr> <td style="font-size:16pt"><input type="file" name="gambar" value="upload gambar"></td> </tr> <tr> <td colspan="2"><input type="text" name="alamat" placeholder="alamat"></td> </tr> <tr> <td><select name="asaldesa" id="soflow" style="width:500px;"> <option value="Tidak Ada">..........</option> <option value="Cinta Raja">Cinta Raja</option> <option value="Hinai Kiri">Hinai Kiri</option> <option value="Jaring Halus">Jaring Halus</option> <option value="Karang Anyar">Karang Anyar</option> <option value="Karang Gading">Karang Gading</option> <option value="Kebun Kelapa">Kebun Kelapa</option> <option value="Kepala Sungai">Kepala Sungai</option> <option value="Kwala Besar">Kwala Besar</option> <option value="Pantai Gading">Pantai Gading</option> <option value="Perkotaan">Perkotaan</option> <option value="Secanggang">Secanggang</option> <option value="Selotong">Selotong</option> <option value="Suka Mulia">Suka Mulia</option> <option value="Sungai Ular">Sungai Ular</option> <option value="Tanjung Ibus">Tanjung Ibus</option> <option value="Telaga Jernih">Telaga Jernih</option> <option value="Teluk">Teluk</option></select>


</td> </tr> <tr> <td><textarea cols="25" rows="5" name="deskripsi" placeholder="Deskripsi Kejadian"></textarea></td> </tr> <tr> <td><input class="button" type="submit" name="simpan" value="UPLOAD" width="10%"></td> </tr> </table> </form> </body> </html>

proses-lapor-danadesa.php <?php session_start(); if (empty($_SESSION['username'])) { header("location:index.php");} include("koneksi.php"); $namalaporan=$_POST['namalaporan']; $gambar=$_FILES['gambar']['name']; $n=$_SESSION['username']; $alamat=$_POST['alamat']; $asaldesa=$_POST['asaldesa']; $deskripsi=$_POST['deskripsi']; $q="INSERT INTO `dana` VALUES('','$n','$gambar','$namalaporan','$alamat','$asaldesa','$deskripsi','','')"; $eq=mysqli_query($koneksi, $q); move_uploaded_file($_FILES['gambar']['tmp-name'],"gambar/".$_FILES['gambar']['name']); if ($eq) { header("location:kontent.php"); } else{ header("location:form-lapor-dana-desa.php"); } ?>


form-lapor-progress-dana.php <html> <head> <title></title> <style type="text/css"> body{ height: 100%; width: 100%; margin: 0; padding: 0; background-color: #008080; } .header{ width: 100%; height: 10%; background-color: #2f4f4f; } .menu{ height: 100%; width: 0%; float: left; background: transparent; border: none; } input[type=text] { width: 75%; height: padding: 10px 10px; margin: 2px 0; box-sizing: border-box; font-size: 12pt; border: 3px solid #fff; -webkit-transition: 0.5s; transition: 0.5s; color: #fff; background: transparent; outline: none; } input[type=text]:focus { border: 3px solid #555; border-radius: 7px; } textarea{ width: 75%; padding: 10px 10px; margin: 2px 0; box-sizing: border-box; font-size: 11pt;


color: #fff; border: 3px solid #fff; -webkit-transition: 0.5s; transition: 0.5s; background: transparent; outline: none; } textarea:focus { border: 3px solid #555; border-radius: 7px; } .button { background-color: #2f4f4f; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; width: 74%; } .button { background-color: #2f4f4f; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; width: 74%; } </style> </head> <body> <?php session_start(); if (empty($_SESSION['username'])) { header("location:index.php"); } $n=$_SESSION['username'];


?> <div class="header"> <form action="menu.html" method="POST"> <button class="menu"><img src="back.png" widht="50%" height="50%" style="margin-left:75%;margin-top:4%"></button></form> <p style="padding-top:6%;margin-left:30%;font-size:33pt;color:#ffffff; font-family:alegreya">LAPOR PROGRESS DANA</p> </div> <center> <form action="proses-lapor-progress-danadesa.php" method="POST" enctype="multipart/form-data"> <table style="margin-left:12%; margin-top:4%"> <tr> <td style="font-size:25pt; color:#fff">Nama Laporan</td> <td><select name="namalaporan" style="width:500px;" required> <option value="tidak ada">Pilih nama laporan</option> <?php include "koneksi.php"; $eq="SELECT * FROM `dana`"; $e=mysqli_query($koneksi, $eq); $no=1; while($de=mysqli_fetch_array($e)){ echo " <option value=\"".$de['nama_laporan']."\">".$de['nama_laporan']."</option> "; $no++; } ?> </select></td> </tr> <tr> <td style="font-size:25pt; color:#fff">Perkembangan</td> <td><input type="text" name="perkembangan" required></td> </tr> <tr>


<td></td> <td style="font-size:8pt; color:#fff">*masukkan dalam persentase</td> </tr> <tr> <td style="font-size:25pt; color:#fff">Kendala</td> <td><textarea cols="25" rows="5" name="kendala" required></textarea></td> </tr> <tr> <td></td> <td><input class="button" type="submit" name="simpan" value="UPLOAD" width="10%"></td> </tr> </table> </form> </body> </html>

proses-lapor-progress-danadesa.php <?php session_start(); if (empty($_SESSION['username'])) { header("location:index.php");} include("koneksi.php"); $n=$_SESSION['username']; $namalaporan=$_POST['namalaporan']; $perkembangan=$_POST['perkembangan']; $kendala=$_POST['kendala']; $q="UPDATE `dana` set perkembangan='$perkembangan', kendala='$kendala' WHERE nama_laporan='$namalaporan'"; $eq=mysqli_query($koneksi, $q); if ($eq) { echo '<META HTTP-EQUIV="Refresh" Content="0; URL=kontent.php">'; } else{ echo "Gagal diperbaharui"; } ?>


daftar.php <html> <head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> body{ width: 100%; height: 100%; } .logo{ width: 100%; height: 10%; } .isiform{ width: 100%; height: 70%; margin-top: 5%; } input[type=text] { width: 65%; padding: 10px 10px; margin: 2px 0; font-size: 11pt; text-align: center; box-sizing: border-box; border: 3px solid #fff; -webkit-transition: 0.5s; transition: 0.5s; background: transparent; outline: none; } input[type=text]:focus { border: 3px solid #555; border-radius: 7px; } input[type=number] { width: 65%; padding: 10px 10px; margin: 2px 0; box-sizing: border-box; font-size: 11pt; text-align: center; border: 3px solid #fff; -webkit-transition: 0.5s; transition: 0.5s;


background: transparent; outline: none; } input[type=number]:focus { border: 3px solid #555; border-radius: 7px; } select#soflow, select#soflow-color { -webkit-appearance: button; -webkit-border-radius: 2px; -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -webkit-padding-end: 20px; -webkit-padding-start: 2px; -webkit-user-select: none; background-image: url(http://i62.tinypic.com/15xvbd5.png), -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5); background-position: 97% center; background-repeat: no-repeat; border: 1px solid #AAA; color: #555; font-size: inherit; margin: 20px; overflow: hidden; padding: 5px 10px; text-overflow: ellipsis; white-space: nowrap; width: 300px; } select#soflow-color { color: #fff; background-image: url(http://i62.tinypic.com/15xvbd5.png), -webkit-linear-gradient(#779126, #779126 40%, #779126); background-color: #779126; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; padding-left: 15px; } .button { background-color: #2f4f4f; border: none; color: white; padding: 15px 32px; text-align: center;


text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; width: 65%; } </style> </head> <body bgcolor="#008080"><center> <div class="logo"> <img src="satu.png" width="20%" height="90%"> </div> <div class="isiform"> <form action="proses_daftar.php" method="POST"> <input type="text" name="namalengkap" placeholder="nama lengkap" required><br><br> <input type="text" name="username" placeholder="username" required><br><br> <input type="text" name="password" placeholder="password" required><br><br> <input type="text" name="jabatan" placeholder="jabatan" required><br><br> <input type="text" name="alamat" placeholder="alamat" required><br><br> <select name="asaldesa" id="soflow" style="width:240px;"> <option value="Tidak Ada">..........</option> <option value="Cinta Raja">Cinta Raja</option> <option value="Hinai Kiri">Hinai Kiri</option> <option value="Jaring Halus">Jaring Halus</option> <option value="Karang Anyar">Karang Anyar</option> <option value="Karang Gading">Karang Gading</option> <option value="Kebun Kelapa">Kebun Kelapa</option> <option value="Kepala Sungai">Kepala Sungai</option> <option value="Kwala Besar">Kwala Besar</option>


<option value="Pantai Gading">Pantai Gading</option> <option value="Perkotaan">Perkotaan</option> <option value="Secanggang">Secanggang</option> <option value="Selotong">Selotong</option> <option value="Suka Mulia">Suka Mulia</option> <option value="Sungai Ular">Sungai Ular</option> <option value="Tanjung Ibus">Tanjung Ibus</option> <option value="Telaga Jernih">Telaga Jernih</option> <option value="Teluk">Teluk</option> </select><br><br> <input type="number" name="nohp" placeholder="no hp" required><br><br> <input class="button" type="submit" name="daftar" value="DAFTAR" > </form> </div> </body> </html>

proses_daftar.php <?php include('koneksi.php'); $namalengkap=$_POST['namalengkap']; $username=$_POST['username']; $password=$_POST['password']; $jabatan=$_POST['jabatan']; $alamat=$_POST['alamat']; $asaldesa=$_POST['asaldesa']; $nohp=$_POST['nohp']; $query="INSERT INTO `user` VALUES('','$username', '$namalengkap', '$password', '$jabatan', '$alamat', '$asaldesa', '$nohp')"; $execute=mysqli_query($koneksi, $query); if ($execute) { include 'index.php'; } else{ echo "gagal";


} ?>

about.php <html> <head> <title></title> <style type="text/css"> body{ height: 100%; width: 100%; margin: 0; padding: 0; background-color: #008080; } .header{ width: 100%; height: 10%; background-color: #2f4f4f; } .menu{ height: 100%; width: 0%; float: left; background: transparent; border: none; } input[type=text] { width: 75%; height: padding: 10px 10px; margin: 2px 0; box-sizing: border-box; font-size: 12pt; border: 3px solid #fff; -webkit-transition: 0.5s; transition: 0.5s; color: #fff; background: transparent; outline: none; } input[type=text]:focus { border: 3px solid #555; border-radius: 7px; } textarea{ width: 75%; padding: 10px 10px;


margin: 2px 0; box-sizing: border-box; font-size: 11pt; color: #fff; border: 3px solid #fff; -webkit-transition: 0.5s; transition: 0.5s; background: transparent; outline: none; } textarea:focus { border: 3px solid #555; border-radius: 7px; } .button { background-color: #2f4f4f; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; width: 74%; } .button { background-color: #2f4f4f; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; width: 74%; } </style> </head> <body> <center> <p style="font-size:20pt; margin-top:25%; font-family:alegreya; color:white">Aplikasi ini dibuat untuk mempermudah masyarakat Kecamatan Secanggang dalam


menyampaikan informasi atau kejadian-kejadian yang terjadi di sekitar mereka. Serta membantu para pegawai atau petugas desa untuk melaporkan penggunaan dana desa mereka dan perkembangan serta kendala dari penggunaan dana tersebut. </p> </body> </html>

Halaman admin

Index.html <html> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <style> .logo{ width: 100%; height: 20%; } .isiform{ width: 100%; height: 70%; margin-top: 2%; } a{ text-decoration: none; } .dftr{ color: #f5fffa; } input[type=text] { width: 15%; padding: 10px 10px; margin: 2px 0; box-sizing: border-box; border: 3px solid #fff; -webkit-transition: 0.5s; transition: 0.5s; background: transparent; outline: none;


} input[type=text]:focus { border: 3px solid #555; border-radius: 7px; } input[type=password] { width: 15%; padding: 10px 10px; margin: 2px 0; box-sizing: border-box; border: 3px solid #fff; -webkit-transition: 0.5s; transition: 0.5s; background: transparent; outline: none; } input[type=password]:focus { border: 3px solid #555; border-radius: 7px; } </style> </head> <body bgcolor="#008080"><center> <div class="logo"> <img src="../satu.png" width="5%" height="40%" style="margin-top:2.5%"></div> <center> <div class="isiform"> <form action="proses-login-admin.php" method="POST"> <input style="text-align:center; text-color:#f5fffa" type="text" name="username" placeholder="username"><br><br> <input style="text-align:center; text-color:#f5fffa" type="password" name="password" placeholder="password"><br><br> <input style="margin-left:20px" class="btn btn-outline-dark" type="submit" name="login" value="LOGIN"> </form> </div> </body> </html>

Proses-login-admin.php <?php


include("../koneksi.php"); $username=$_POST['username']; $password=$_POST['password']; $login=mysqli_query($koneksi,"SELECT * FROM `admin` where username='$username' AND password='$password'"); $log=mysqli_fetch_array($login); if (empty($_POST['username']) || empty($_POST['password'])) { header('location:index.html'); exit; } elseif($log['username']==$username AND $log['password']==$password){ header('location:home.php'); } elseif (empty($_POST['username']) AND empty($_POST['password'])) { header('location:index.html'); } else { header('location:index.html'); } ?>

Home.php <html> <head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> body{ height: 100%; width: 100%; margin: 0; padding: 0; background-color: #008080; } .header{ width: 100%;


height: 10%; background-color: #2f4f4f; } .kiri{ width: 25%; height: 90%; background-color: #2f4f4f; float: left; } #home{ width: 100%; height: 20%; background-color: grey; margin-top: 5% } #dataanggota{ width: 100%; height: 20%; background-color: green; margin-top: 5% } #laporan{ width: 100%; height: 20%; background-color: blue; margin-top: 5% } #logout{ width: 100%; height: 20%; background-color: navy; margin-top: 5% } .kanan{ width: 75%; height: 90%; margin-left: 25%; } .block { display: block; width: 100%; height: 100%; border: none; background-color: #2f4f4f; color: white; padding: 14px 28px; font-size: 16px; cursor: pointer; text-align: center;


} .block:hover { background-color: #ddd; color: #008080; } .dropbtn { background-color: #2f4f4f ; color: white; padding: 16px; width: 100%; height: 100%; font-size: 20pt; font-family: alegreya; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; width: 100%; height: 100%; } .dropdown-content { display: none; width: 100%; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn {


background-color: #ddd; color: #008080; } </style> </head> <body> <div class="header"> <p style="padding-top:1.3%;font-size:20pt;color:#fff; font-family:alegreya; text-align:center">Halaman Admin</p> </div> <div class="kiri"> <div id="home"> <form action="home.php" method="POST"> <button type="submit" class="block"><p style="padding-top:3%;font-size:20pt; font-family:alegreya; text-align:center">Home</p></button> </form> </div> <div id="dataanggota"> <form action="data-anggota.php" method="POST"> <button type="submit" class="block"><p style="padding-top:3%;font-size:20pt; font-family:alegreya; text-align:center">Data Anggota</p></button> </form> </div> <div id="laporan"> <div class="dropdown"> <button class="dropbtn">Data Laporan</button> <div class="dropdown-content"> <a href="lihat-laporan-data-kegiatan.php">Data Laporan Kegiatan</a> <a href="lihat-laporan-data-dana.php">Data Laporan Dana</a> </div> </div> </div> <div id="logout"> <form action="index.html" method="POST"> <button type="submit" class="block"><p style="padding-top:3%;font-size:20pt; font-family:alegreya; text-align:center">Logout</p></button> </form> </div> </div> <div class="kanan"></div>


</body> </html>

Data-anggota.php <html> <head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> body{ height: 100%; width: 100%; margin: 0; padding: 0; background-color: #008080; } .header{ width: 100%; height: 10%; background-color: #2f4f4f; } .kiri{ width: 25%; height: 90%; background-color: #2f4f4f; float: left; } #home{ width: 100%; height: 20%; background-color: grey; margin-top: 5% } #dataanggota{ width: 100%; height: 20%; background-color: green; margin-top: 5% } #laporan{ width: 100%; height: 20%; background-color: blue; margin-top: 5% } #logout{


width: 100%; height: 20%; background-color: navy; margin-top: 5% } .kanan{ width: 75%; height: 90%; margin-left: 25%; } .block { display: block; width: 100%; height: 100%; border: none; background-color: #2f4f4f; color: white; padding: 14px 28px; font-size: 16px; cursor: pointer; text-align: center; } .block:hover { background-color: #ddd; color:#008080; } table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } tr:hover {background-color:#f5f5f5;} .dropbtn { background-color: #2f4f4f ; color: white; padding: 16px; width: 100%; height: 100%; font-size: 20pt; font-family: alegreya; border: none; cursor: pointer;


} .dropdown { position: relative; display: inline-block; width: 100%; height: 100%; } .dropdown-content { display: none; width: 100%; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #ddd; color: #008080; } </style> </head> <body> <div class="header"> <p style="padding-top:1.3%;font-size:20pt;color:#ffffff; font-family:alegreya; text-align:center">Data Anggota</p> </div> <div class="kiri"> <div id="home"> <form action="home.php" method="POST">


<button type="submit" class="block"><p style="padding-top:3%;font-size:20pt; font-family:alegreya; text-align:center">Home</p></button> </form> </div> <div id="dataanggota"> <form action="data-anggota.php" method="POST"> <button type="submit" class="block"><p style="padding-top:3%;font-size:20pt; font-family:alegreya; text-align:center">Data Anggota</p></button> </form> </div> <div id="laporan"> <div class="dropdown"> <button class="dropbtn">Data Laporan</button> <div class="dropdown-content"> <a href="lihat-laporan-data-kegiatan.php">Data Laporan Kegiatann</a> <a href="lihat-laporan-data-dana.php">Data Laporan Dana</a> </div> </div> </div> <div id="logout"> <form action="index.html" method="POST"> <button type="submit" class="block"><p style="padding-top:3%;font-size:20pt; font-family:alegreya; text-align:center">Logout</p></button> </form> </div> </div> <div class="kanan"> <center> <p style="padding-top:10%; font-family:monospace; font-size:20pt; color:LightGray"><strong>Data Anggota Quick Report</strong></p><br> <table> <?php mysql_connect("localhost", "root",""); mysql_select_db("quickreport"); $q="SELECT * FROM `user`"; $eq=mysql_query($q); if(mysql_num_rows($eq)>0){ echo"


<tr> <th>No</th> <th>Username</th> <th>Nama lengkap</th> <th>Jabatan</th> <th>Alamat</th> <th>Asal Desa</th> <th>No hp</th> </tr> "; $no=1; while ($de=mysql_fetch_array($eq)) { echo" <tr> <td>".$no."</td> <td>".$de['username']."</td> <td>".$de['nama_lengkap']."</td> <td>".$de['jabatan']."</td> <td>".$de['alamat']."</td> <td>".$de['asal_desa']."</td> <td>".$de['no_hp']."</td> </tr> "; $no++; } } ?> </table> </center> </div> </body> </html>

Data-laporan.php <html> <head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> body{ height: 100%; width: 100%; margin: 0; padding: 0;


background-color: #008080; } .header{ width: 100%; height: 10%; background-color: #2f4f4f; } .kiri{ width: 25%; height: 90%; background-color: #2f4f4f; float: left; } #home{ width: 100%; height: 20%; background-color: grey; margin-top: 5% } #dataanggota{ width: 100%; height: 20%; background-color: green; margin-top: 5% } #laporan{ width: 100%; height: 20%; background-color: blue; margin-top: 5% } #logout{ width: 100%; height: 20%; background-color: navy; margin-top: 5% } .kanan{ width: 75%; height: 90%; margin-left: 25%; } .block { display: block; width: 100%; height: 100%; border: none; background-color: #2f4f4f;


color: white; padding: 14px 28px; font-size: 16px; cursor: pointer; text-align: center; } .block:hover { background-color: #ddd; color: #008080; } </style> </head> <body> <div class="header"> <p style="padding-top:1.3%;font-size:20pt;color:#ffffff; font-family:alegreya; text-align:center">Data Laporan</p> </div> <div class="kiri"> <div id="home"> <form action="home.php" method="POST"> <button type="submit" class="block"><p style="padding-top:3%;font-size:20pt; font-family:alegreya; text-align:center">Home</p></button> </form> </div> <div id="dataanggota"> <form action="data-anggota.php" method="POST"> <button type="submit" class="block"><p style="padding-top:3%;font-size:20pt; font-family:alegreya; text-align:center">Data Anggota</p></button> </form> </div> <div id="laporan"> <form action="data-laporan.php" method="POST"> <button type="submit" class="block"><p style="padding-top:3%;font-size:20pt; font-family:alegreya; text-align:center">Laporan</p></button> <form> </div> <div id="logout"> <form action="logout.php" method="POST">


<button type="submit" class="block"><p style="padding-top:3%;font-size:20pt; font-family:alegreya; text-align:center">Logout</p></button> </form> </div> </div> <div class="kanan"> <center> <table style="padding-top:16%"> <form action="lihat-data-laporan.php" method="POST"> <tr> <td>Pilih Jenis Laporan</td> <td><select name="jenislaporan" required> <option value="....">.......</option> <option value="Kegiatan">Kegiatan</option> <option value="Dana">Dana</option> </select></td> </tr> <tr></tr> <tr></tr> <tr></tr> <tr></tr> <tr></tr> <tr></tr> <tr></tr> <tr></tr><tr></tr> <tr></tr> <tr></tr> <tr></tr><tr></tr> <tr></tr> <tr></tr>p <tr></tr> <tr> <td></td> <td><input type="submit" name="lihatlaporan" value="Lihat"></td> </tr> </form> </table> </div> </body> </html> <?php


if(isset($_GET['lihatlaporan'] )) ?>

Lihat-laporan-data-dana.php <html> <head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> body{ height: 100%; width: 100%; margin: 0; padding: 0; background-color: #008080; } .header{ width: 100%; height: 10%; background-color: #2f4f4f; } .kiri{ width: 25%; height: 90%; background-color: #2f4f4f; float: left; } #home{ width: 100%; height: 20%; background-color: grey; margin-top: 5% } #dataanggota{ width: 100%; height: 20%; background-color: green; margin-top: 5% } #laporan{ width: 100%; height: 20%; background-color: blue; margin-top: 5% } #logout{


width: 100%; height: 20%; background-color: navy; margin-top: 5% } .kanan{ width: 75%; height: 90%; margin-left: 25%; } .block { display: block; width: 100%; height: 100%; border: none; background-color: #2f4f4f; color: white; padding: 14px 28px; font-size: 16px; cursor: pointer; text-align: center; } .block:hover { background-color: #ddd; color:#008080; } table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } tr:hover {background-color:#f5f5f5;} .dropbtn { background-color: #2f4f4f ; color: white; padding: 16px; width: 100%; height: 100%; font-size: 20pt; font-family: alegreya; border: none; cursor: pointer;


} .dropdown { position: relative; display: inline-block; width: 100%; height: 100%; } .dropdown-content { display: none; width: 100%; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #ddd; color: #008080; } </style> </head> <body> <div class="header"> <p style="padding-top:1.3%;font-size:20pt;color:#fff; font-family:alegreya; text-align:center">Laporan Data Dana</p> </div> <div class="kiri"> <div id="home"> <form action="home.php" method="POST"


<button type="submit" class="block"><p style="padding-top:3%;font-size:20pt; font-family:alegreya; text-align:center">Home</p></button> </form> </div> <div id="dataanggota"> <form action="data-anggota.php" method="POST"> <button type="submit" class="block"><p style="padding-top:3%;font-size:20pt; font-family:alegreya; text-align:center">Data Anggota</p></button> </form> </div> <div id="laporan"> <div class="dropdown"> <button class="dropbtn">Data Laporan</button> <div class="dropdown-content"> <a href="lihat-laporan-data-kegiatan.php">Data Laporan Kegiatan</a> <a href="lihat-laporan-data-dana.php">Data Laporan Dana</a> </div> </div> </div> <div id="logout"> <form action="index.html" method="POST"> <button type="submit" class="block"><p style="padding-top:3%;font-size:20pt; font-family:alegreya; text-align:center">Logout</p></button> </form> </div> </div> <div class="kanan"> <center> <p style="padding-top:5%; font-family:monospace; font-size:20pt; color:LightGray"><strong>Data Laporan Penggunaan Dana</strong></p><br> <table> <?php mysql_connect("localhost", "root",""); mysql_select_db("quickreport"); $q="SELECT * FROM `dana`"; $eq=mysql_query($q); if(mysql_num_rows($eq)>0){ echo"


<tr> <th>No</th> <th>Nama Pelapor</th> <th>File</th> <th>Nama Laporan</th> <th>Alamat</th> <th>Desa</th> <th>Deskripsi</th> <th>Perkembangan</th> <th>Kendala</th> <th>Download</th> </tr> "; $no=1; while ($de=mysql_fetch_array($eq)) { echo" <tr> <td>".$no."</td> <td>".$de['nama_pelapor']."</td> <td>".$de['file']."</td> <td>".$de['nama_laporan']."</td> <td>".$de['alamat']."</td> <td>".$de['desa']."</td> <td>".$de['deskripsi']."</td> <td>".$de['perkembangan']."</td> <td>".$de['kendala']."</td> <td><a href=\"../simpan.php?file=$de[file]\" style=\"color:#fff\" >Download</a><hr><br> </tr> "; $no++; } } ?> </table> </div> </body> </html>

Lihat-laporan-data-kegiatan.php <html> <head> <title></title>


margin-left: 25%; } .block { display: block; width: 100%; height: 100%; border: none; background-color: #2f4f4f; color: white; padding: 14px 28px; font-size: 16px; cursor: pointer; text-align: center; } .block:hover { background-color: #ddd; color:#008080; } table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } tr:hover {background-color:#f5f5f5;} .dropbtn { background-color: #2f4f4f ; color: white; padding: 16px; width: 100%; height: 100%; font-size: 20pt; font-family: alegreya; border: none; cursor: pointer; } .dropdown { position: relative; display: inline-block; width: 100%; height: 100%; }


.dropdown-content { display: none; width: 100%; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #ddd; color: #008080; } </style> </head> <body> <div class="header"> <p style="padding-top:1.3%;font-size:20pt;color:#fff; font-family:alegreya; text-align:center">Laporan Data Kegiatan</p> </div> <div class="kiri"> <div id="home"> <form action="home.php" method="POST"> <button type="submit" class="block"><p style="padding-top:3%;font-size:20pt; font-family:alegreya; text-align:center">Home</p></button> </form> </div> <div id="dataanggota"> <form action="data-anggota.php" method="POST"> <button type="submit" class="block"><p style="padding-top:3%;font-size:20pt; font-


family:alegreya; text-align:center">Data Anggota</p></button> </form> </div> <div id="laporan"> <div class="dropdown"> <button class="dropbtn">Data Laporan</button> <div class="dropdown-content"> <a href="lihat-laporan-data-kegiatan.php">Data Laporan Kegiatan</a> <a href="lihat-laporan-data-dana.php">Data Laporan Dana</a> </div> </div> </div> <div id="logout"> <form action="index.html" method="POST"> <button type="submit" class="block"><p style="padding-top:3%;font-size:20pt; font-family:alegreya; text-align:center">Logout</p></button> </form> </div> </div> <div class="kanan"> <center> <p style="padding-top:5%; font-family:monospace; font-size:20pt; color:LightGray"><strong>Data Laporan Kegiatan</strong></p><br> <table> <?php mysql_connect("localhost", "root",""); mysql_select_db("quickreport"); $q="SELECT * FROM `kegiatan`"; $eq=mysql_query($q); if(mysql_num_rows($eq)>0){ echo" <tr> <th>No</th> <th>Nama Pelapor</th> <th>File</th> <th>Alamat</th> <th>Deskripsi</th> <th>Download</th> </tr> "; $no=1;


while ($de=mysql_fetch_array($eq)) { echo" <tr> <td>".$no."</td> <td>".$de['nama_pelapor']."</td> <td>".$de['file']."</td> <td>".$de['alamat']."</td> <td>".$de['deskripsi']."</td> <td><a href=\"../simpan.php?file=$de[file]\" style=\"color:#fff\" >Download</a><hr><br> </tr> "; $no++; } } ?> </table> </div> </body> </html>

Form_download.php <html> <head> <title></title> </head> <body><table border="1"> <?php mysql_connect("localhost", "root",""); mysql_select_db("quickreport"); $q="SELECT * FROM `kegiatan`"; $eq=mysql_query($q); if(mysql_num_rows($eq)>0){ echo" <tr> <th>No</th> <th>Nama Pelapor</th> <th>File</th> <th>Alamat</th> <th>Deskripsi</th> <th>Download</th> </tr> ";


$no=1; while ($de=mysql_fetch_array($eq)) { echo" <tr> <td>".$no."</td> <td>".$de['nama_pelapor']."</td> <td>".$de['file']."</td> <td>".$de['alamat']."</td> <td>".$de['deskripsi']."</td> <td><a href=\"simpan.php?file=$de[file]\">Download</a><hr><br> </tr> "; $no++; } } ?> </table></body> </html>

Simpan.php <?php if(isset($_GET['file'])){ $file = $_GET['file']; if (file_exists($file)) { header('Content-Description: File Transfer'); header('Content-Type: application/octet-stream'); header('Content-Disposition: attachment; filename='.basename($file)); header('Content-Transfer-Encoding: binary'); header('Expires: 0'); header('Cache-Control: private'); header('Pragma: private'); header('Content-Length: ' . filesize($file)); ob_clean(); flush(); readfile($file); exit; } else


{ echo "file {$_GET['file']} sudah tidak ada.";


PERANCANGAN APLIKASI PENGADUAN MASYARAKAT DI …

Documents

Transcript of PERANCANGAN APLIKASI PENGADUAN MASYARAKAT DI …