perancangan aplikasi pengaduan masyarakat di …
Post on 05-Oct-2021
17 Views
Preview:
TRANSCRIPT
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
UNIVERSITAS SUMATERA UTARA
PERANCANGAN APLIKASI PENGADUAN MASYARAKAT DI
KECAMATAN SECANGGANG MENGGUNAKAN ANDROID
LAPORAN TUGAS AKHIR
Diajukanuntukmelengkapi tugas danmemenuhi syarat memperoleh
Ahli Madya
MAZDALIFAH
152406046
PROGRAM STUDI TEKNIK INFORMATIKA D3
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS SUMATERA UTARA
MEDAN
2018
UNIVERSITAS SUMATERA UTARA
PERNYATAAN
PERANCANGAN APLIKASI PENGADUAN MASYARAKAT DI
KECAMATAN SECANGGANG MENGGUNAKAN ANDROID
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
UNIVERSITAS SUMATERA UTARA
i
UNIVERSITAS SUMATERA UTARA
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.
UNIVERSITAS SUMATERA UTARA
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.
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
ix
4.19. Halaman data laporan dana 46
4.20. Halaman logout 46
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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.
UNIVERSITAS SUMATERA UTARA
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.
UNIVERSITAS SUMATERA UTARA
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.
UNIVERSITAS SUMATERA UTARA
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.
UNIVERSITAS SUMATERA UTARA
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.
UNIVERSITAS SUMATERA UTARA
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.
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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.
UNIVERSITAS SUMATERA UTARA
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 :
UNIVERSITAS SUMATERA UTARA
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.
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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.
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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 :
UNIVERSITAS SUMATERA UTARA
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)
UNIVERSITAS SUMATERA UTARA
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 :
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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.
UNIVERSITAS SUMATERA UTARA
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.
UNIVERSITAS SUMATERA UTARA
34
Gambar 3.21. Halaman Logout
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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 :
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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 :
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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 :
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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.
UNIVERSITAS SUMATERA UTARA
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.
UNIVERSITAS SUMATERA UTARA
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.
UNIVERSITAS SUMATERA UTARA
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.
UNIVERSITAS SUMATERA UTARA
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)
Data Masukan Yang di Harapkan Pengamatan Kesimpulan
Username:
mazdalifah
Password:
mazda
Tidak dapat login
dan kembali ke
halaman login
Kembali ke
halaman login
Berhasil
UNIVERSITAS SUMATERA UTARA
48
b. Pengujian Register Akun
Tabel 4.3. Pengujian Register Akun
Kasus dan Hasil Uji (Data Normal)
Data Masukan Yang di Harapkan Pengamatan Kesimpulan
Data diisi
sesuai form
Data masuk ke
database dan bisa
login
Data masuk ke
database
Berhasil
Kasus dan Hasil Uji (Data Salah)
Data Masukan Yang di Harapkan Pengamatan Kesimpulan
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
Kasus dan Hasil Uji (Data Normal)
Data Masukan Yang di Harapkan Pengamatan Kesimpulan
Data diisi
sesuai form
Data masuk ke
database dan
tampil ke halaman
konten
Data masuk ke
database dan
tampil ke
halaman konten
Berhasil
Kasus dan Hasil Uji (Data Salah)
Data Masukan Yang di Harapkan Pengamatan Kesimpulan
Data tidak
lengkap diisi
Notifikasi untuk
melengkapi data di
form
Notifikasi tampil Berhasil
UNIVERSITAS SUMATERA UTARA
49
2. Pengujian Data Laporan Penggunaan Dana
Tabel 4.5. Pengujian Pengisian Data Laporan Penggunaan Dana
Kasus dan Hasil Uji (Data Normal)
Data Masukan Yang di Harapkan Pengamatan Kesimpulan
Data diisi
sesuai form
Data masuk ke
database
Data masuk ke
database
Berhasil
Kasus dan Hasil Uji (Data Salah)
Data Masukan Yang di Harapkan Pengamatan Kesimpulan
Data tidak
lengkap diisi
Notifikasi untuk
melengkapi data di
form
Notifikasi tampil Berhasil
3. Pengujian Data Laporan Progress Penggunaan Dana Desa
Tabel 4.6. Pengujian Pengisian Data Laporan Progress Penggunaan Dana Desa
Kasus dan Hasil Uji (Data Normal)
Data Masukan Yang di Harapkan Pengamatan Kesimpulan
Data diisi
sesuai form
Data masuk ke
database
Data masuk ke
database
Berhasil
Kasus dan Hasil Uji (Data Salah)
Data Masukan Yang di Harapkan Pengamatan Kesimpulan
Data tidak
lengkap diisi
Notifikasi untuk
melengkapi data di
form
Notifikasi tampil Berhasil
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.
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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%
UNIVERSITAS SUMATERA UTARA
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
Dari tabel diatas dapat dilihat bahwa jumlah nilai dari 10 responden untuk
pertanyaan kedua adalah 34 dengan nilai presentasenya 85%.
c. Analisa pertanyaan ketiga
Dari tabel diatas dapat dilihat bahwa jumlah nilai dari 10 responden untuk
pertanyaan ketiga adalah 33 dengan nilai presentasenya 82, 5%.
d. Analisa pertanyaan keempat
Dari tabel diatas dapat dilihat bahwa jumlah nilai dari 10 responden untuk
pertanyaan keempat adalah 34 dengan nilai presentasenya 85%.
e. Analisa pertanyaan kelima
Dari tabel diatas dapat dilihat bahwa jumlah nilai dari 10 responden untuk
pertanyaan kelima adalah 32 dengan nilai presentasenya 80%.
f. Analisa pertanyaan keenam
Dari tabel diatas dapat dilihat bahwa jumlah nilai dari 10 responden untuk
pertanyaan keenam adalah 35 dengan nilai presentasenya 87,5%.
g. Analisa pertanyaan ketujuh
Dari tabel diatas dapat dilihat bahwa jumlah nilai dari 10 responden untuk
pertanyaan pertama adalah 36 dengan nilai presentasenya 90%.
h. Analisa pertanyaan kedelapan
Dari tabel diatas dapat dilihat bahwa jumlah nilai dari 10 responden untuk
pertanyaan kedelapan adalah 37 dengan nilai presentasenya 92,5%.
i. Analisa pertanyaan kesembilan
UNIVERSITAS SUMATERA UTARA
53
Dari tabel diatas dapat dilihat bahwa jumlah nilai dari 10 responden untuk
pertanyaan kesembilan adalah 35 dengan nilai presentasenya 87,5%.
j. Analisa pertanyaan kesepuluh
Dari tabel diatas dapat dilihat bahwa jumlah nilai dari 10 responden untuk
pertanyaan kesepuluh adalah 36 dengan nilai presentasenya 90%.
k. Analisa pertanyaan kesebelas
Dari tabel diatas dapat dilihat bahwa jumlah nilai dari 10 responden untuk
pertanyaan kesebelas adalah 33 dengan nilai presentasenya 82, 5%.
l. Analisa pertanyaan kedua belas
Dari tabel diatas dapat dilihat bahwa jumlah nilai dari 10 responden untuk
pertanyaan kedua belas adalah 36 dengan nilai presentasenya 90%.
m. Analisa pertanyaan ketiga belas
Dari tabel diatas dapat dilihat bahwa jumlah nilai dari 10 responden untuk
pertanyaan ketiga belas adalah 35 dengan nilai presentasenya 87,5%.
n. Analisa pertanyaan keempat belas
Dari tabel diatas dapat dilihat bahwa jumlah nilai dari 10 responden untuk
pertanyaan keempat belas adalah 33 dengan nilai presentasenya 82,5%.
UNIVERSITAS SUMATERA UTARA
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.
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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%;
UNIVERSITAS SUMATERA UTARA
} 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;
UNIVERSITAS SUMATERA UTARA
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);
UNIVERSITAS SUMATERA UTARA
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; }
UNIVERSITAS SUMATERA UTARA
</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{
UNIVERSITAS SUMATERA UTARA
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>
UNIVERSITAS SUMATERA UTARA
<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
UNIVERSITAS SUMATERA UTARA
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'];
UNIVERSITAS SUMATERA UTARA
?> <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();
UNIVERSITAS SUMATERA UTARA
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; }
UNIVERSITAS SUMATERA UTARA
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%;
UNIVERSITAS SUMATERA UTARA
} .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>
UNIVERSITAS SUMATERA UTARA
</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>
UNIVERSITAS SUMATERA UTARA
</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"); } ?>
UNIVERSITAS SUMATERA UTARA
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;
UNIVERSITAS SUMATERA UTARA
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'];
UNIVERSITAS SUMATERA UTARA
?> <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>
UNIVERSITAS SUMATERA UTARA
<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"; } ?>
UNIVERSITAS SUMATERA UTARA
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;
UNIVERSITAS SUMATERA UTARA
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;
UNIVERSITAS SUMATERA UTARA
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>
UNIVERSITAS SUMATERA UTARA
<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";
UNIVERSITAS SUMATERA UTARA
} ?>
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;
UNIVERSITAS SUMATERA UTARA
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
UNIVERSITAS SUMATERA UTARA
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;
UNIVERSITAS SUMATERA UTARA
} 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
UNIVERSITAS SUMATERA UTARA
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%;
UNIVERSITAS SUMATERA UTARA
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;
UNIVERSITAS SUMATERA UTARA
} .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 {
UNIVERSITAS SUMATERA UTARA
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>
UNIVERSITAS SUMATERA UTARA
</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{
UNIVERSITAS SUMATERA UTARA
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;
UNIVERSITAS SUMATERA UTARA
} .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">
UNIVERSITAS SUMATERA UTARA
<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"
UNIVERSITAS SUMATERA UTARA
<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;
UNIVERSITAS SUMATERA UTARA
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;
UNIVERSITAS SUMATERA UTARA
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">
UNIVERSITAS SUMATERA UTARA
<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
UNIVERSITAS SUMATERA UTARA
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{
UNIVERSITAS SUMATERA UTARA
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;
UNIVERSITAS SUMATERA UTARA
} .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"
UNIVERSITAS SUMATERA UTARA
<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"
UNIVERSITAS SUMATERA UTARA
<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>
UNIVERSITAS SUMATERA UTARA
<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%;
UNIVERSITAS SUMATERA UTARA
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%; }
UNIVERSITAS SUMATERA UTARA
.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-
UNIVERSITAS SUMATERA UTARA
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;
UNIVERSITAS SUMATERA UTARA
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> ";
UNIVERSITAS SUMATERA UTARA
$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
UNIVERSITAS SUMATERA UTARA
{ echo "file {$_GET['file']} sudah tidak ada.";
UNIVERSITAS SUMATERA UTARA
UNIVERSITAS SUMATERA UTARA
UNIVERSITAS SUMATERA UTARA
UNIVERSITAS SUMATERA UTARA
UNIVERSITAS SUMATERA UTARA
UNIVERSITAS SUMATERA UTARA
top related