## Sistem Informasi Monitoring Proyek Berbasis Web Pada Desa Somagede Kabupaten Banyumas
Dimas Diki 1 , Ragil Wijianto 2 , Ina Maryani 3
1, Universitas Bina Sarana Informatika Jl. HR. Boenyamin No 106 Pabuaran Purwokerto, Indonesia e-mail: 1 aizuwan.id@gmail.com
2,3 Universitas Nusamandiri Jl. Jatiwaringin No. 2, Cipinang Melayu, Jakarta Timur, Indonesia e-mail: ragil.rgw@nusamandiri.ac.id, ina.maryani@nusmandiri.ac.id
Abstrak -  Pada  era  globalisasi  ini,  perkembangan  teknologi  informasi  melaju  dengan  sangat  cepat.  Adapun komputer yang merupakan peralatan yang diciptakan untuk mempermudah pekerjaan manusia dan juga internet yang  digunakan  sebagai  sarana  untuk  memperoleh  informasi  dengan  mudah.  Desa  Somagede  Kabupaten Banyumas  memiliki  beberapa  proyek  yang  sedang  berjalan,  akan  tetapi  beberapa  warga  tidak  mengetahui informasi  tersebut  karena  belum  adanya  sistem  informasi  yang  tersedia.  Ditinjau  dari  masalah  tersebut  maka penulis  membuat  Karya  Ilmiah  mengenai  sistem  informasi  monitoring  proyek  berbasis  web  guna  mengatasi permasalahan tersebut. Pembuatan sistem ini menggunakan cara pengumpulan data dengan melakukan observasi mengenai proyek yang ada di Desa Somagede, wawancara dengan Kepala Desa Somagede sebagai narasumber. Melalui  sistem  ini  dapat  digunakan  sebagai  media  monitoring  proyek  yang  sedang  berjalan  oleh  warga masyarakat.

## Kata Kunci : sistem informasi, monitoring proyek, Desa Somagede
Abstracts - In this era of globalization, the development of information technology is moving very fast. As for computers, which are equipment created to facilitate human work and also the internet which is used as a means to  obtain  information  easily.  Somagede  Village,  Banyumas  Regency  has  several  ongoing  projects,  but  some residents  do  not  know  this  information  because  there  is  no  available  information  system.  Judging  from  these problems,  the  author  makes  a  Scientific  Work  on  a  web-based  project  monitoring  information  system  to overcome  these  problems.  The  making  of  this  system  uses  data  collection  methods  by  observing  projects  in Somagede Village, interviewing the Somagede Village Head as a resource person. Through this system, it can be used as a monitoring medium for ongoing projects by community members.

## Keywords : information systems, project monitoring, Somagede Village

## PENDAHULUAN
Setiap  desa  seharusnya  memiliki  berbagai  macam  infrastruktur  yang  dapat  digunakan  oleh  warganya. Untuk  memenuhi  kebutuhan  tersebut,  tak  jarang  pemerintah  mengeluarkan  dana  yang  tidak  sedikit  untuk pembangunan dan juga perbaikan infrastruktur.
Desa  Somagede  Kabupaten  Banyumas  memiliki  beberapa  proyek  infrastruktur  yang  sedang  berjalan. Tetapi, beberapa warga mungkin tidak mengetahui proyek apa saja yang sedang berlangsung di desanya karena belum adanya wadah untuk mencari informasi tersebut. Alasan lain dari sulitnya pencarian informasi mengenai proyek  yang  sedang  berjalan  adalah  karena  data  proyek  masih  dicatat  secara  manual,  padahal  dari  beberapa warga mungkin ingin memberikan umpan balik dari proyek yang sedang dikerjakan di desanya.
Oleh  karena  itu  penulis  tertarik  untuk  membuat  suatu  sistem  monitoring  proyek  secara  online  dengan menggunakan media website dan internet. Dengan dibuatnya sistem ini penulis berharap penyampaian informasi mengenai proyek desa yang sedang berjalan menjadi semakin mudah.
suatu  program  aplikasi  atau  sistem  informasi  dengan  bertujuan  untuk  membantu  serta  memudahkan pengelolaan    proses  anggaran  belanja,  inovasi,  perubahan  dan  kebijakan-kebijakan  lainnya  yang  bersifat strategis.  Menurut  definisi  dalam  buku  panduan  PMBOK (A  Guide  to  the  Project  Management  Body  of
Volume 1 No. 2 Februari2021
Knowledge) pada  Heryanto  (2015),  definisi  proyek  adalah  suatu  usaha  sementara  yang  dilaksanakan  untuk menghasilkan suatu produk atau jasa yang unik.
Adapun  beberapa  manfaat  dari  pembuatan  sistem  informasi  ini  antara  lain:  Sebagai  wadah  untuk penyampaian informasi mengenai proyek desa yang sedang berjalan, sebagai wadah untuk menampung umpan balik  dari  masyarakat,  mempermudah  pembuatan  laporan  dan  Sebagai  salah  satu  langkah  mengikuti perkembangan teknologi untuk memenuhi kebutuhan masyarakat.

## TINJAUAN PUSTAKA

## 1. Web
Web merupakan  kumpulan  halaman-halaman  yang  berisi  informasi  yang  disimpan  di internet yang  bisa diakses atau dilihat melalui jaringan internet pada perangkat-perangkat yang bisa mengakses internet itu sendiri seperti komputer. Web sebenarnya penyederhanaan dari sebuah istilah dalam dunia komputer yaitu World Wide Web yang merupakan bagian dari teknologi internet .

## 2. Sistem Informasi
Sistem  Informasi  adalah  sistem  yang  di  dalamnya  terdapat  kumpulan  informasi  yang  hubungannya terhadap  operasional  organisasi  atau  instansi  yang  digunakan  untuk  pengambilan  keputusan.  Menurut (Shalahuddin & Sukamto, 2018), “Sistem informasi merupakan kombinasi dari teknologi informasi dan aktivitas manusia untuk mendukung operasi dan manajemen”.
3. Internet
Internet dikembangkan oleh DARPA (Defense Advanced Research Projects Agency) pada tahun 1960-an pada  saat  merintis  ARPANET  yang  merupakan  asal  mula  terbentuknya  teknologi  internet.  Di  tahun  1980-an, internet mulai  dipakai  oleh  kalangan  terbatas  dan  menjalankan  fungsinya  dengan  menghubungkan  berbagai kampus atau universitas populer di Amerika Serikat. Menurut  Gafar  (2016),  “ Internet adalah  jaringan  komputer  yang  luas  dan  besar  yang  mendunia,  yaitu menghubungkan  pemakai  komputer  dari  suatu  negara  ke  negara  lain  di  seluruh  dunia,  dimana  di  dalamnya terdapat berbagai sumber daya informasi dari mulai yang statis hingga yang dinamis dan interaktif”.
4. Website
Menurut Hartono (2016), “ Website adalah kumpulan halaman yang menampilkan informasi data teks, data gambar diam atau gerak, data animasi, suara, video dan atau gabungan dari semuanya, baik yang bersifat statis maupun  dinamis  yang  membentuk  satu  rangkaian  bangunan  yang  saling  terkait  dimana  masing-masing dihubungkan dengan jaringan-jaringan halaman ( hyperlink )”.

## 5. Bahasa Pemrograman
Bahasa  pemrograman  dapat  diartikan  sebagai  sekumpulan  instruksi  yang  diberikan  kepada  komputer untuk dapat melaksanakan tugas-tugas tertentu dalam menyelesaikan suatu permasalahan. Bahasa pemrograman sering juga disebut dengan bahasa komputer.
a) HTML
Menurut  (Kahamdany,  Kusuma,  &  Osmond,  2018)  “HTML  merupakan  dokumen text biasa  yang mudah untuk dimengerti dibandingkan bahasa pemrograman lainnya. Dan karena itu HTML dapat dibaca lewat platform yang berlainan seperti Windows, UNIX, dan lain-lain. Untuk lebih jelasnya HTML adalah suatu script dimana kita bisa menampilkan informasi dan daya kreasi kita lewat internet ”.
b) PHP
Menurut  Welling  dan  Thomson  dalam  (Wijianto,  2017),  “PHP  merupakan  bahasa  pemrograman web yang  bersifat open  source .  Skrip  dalam  bahasa  PHP  dijalankan  di  tingkat server untuk  memproses  data  yang nantinya dikirim ke browser dalam format HTML”.
c) JavaScript
Menurut  Sianipar  (2015),  “ JavaScript merupakan  bahasa script yang  dipakai  untuk  menciptakan halaman web yang dapat berinteraksi dengan pengguna dan dapat merespon event yang terjadi pada halaman”.
6. Database
a) MySQL
Menurut  Abdul  Kadir  dalam  (Muslihudin  &  Larasati,  2017),  “MySQL  adalah  suatu  perangkat  lunak database  relasi  atau  Relational  Database  Management  System  (RDBMS)  yang  didistribusikan  gratis  di  bawah lisensi GPL (General Public License)”.
b) PhpMyAdmin
PhpMyAdmin adalah  sebuah  aplikasi/perangkat  lunak  bebas  ( opensource )  yang  ditulis  dalam  bahasa pemrograman  PHP  yang  digunakan  untuk  menangani  administrasi database MySQL  melalui  jaringan  lokal maupun internet .
7. Aplikasi Perangkat Lunak
a) XAMPP v3.2.2
XAMPP  adalah  perangkat  lunak  bebas  yang  mendukung  banyak  sistem  operasi,  merupakan  campuran  dari
Volume 1 No. 2 Februari2021
beberapa  program.  Yang  mempunyai  fungsi  sebagai server yang  berdiri  sendiri  ( localhost ),  yang  terdiri  dari program MySQL database , Apache HTTP Server , dan penerjemah ditulis dalam bahasa pemrograman PHP dan Perl.
b) Sublime Text 3
Sublime  Text  adalah  teks  editor  untuk  berbagai  bahasa  pemrograman  termasuk  pemrograman  PHP  berbasis lintas platform dengan Phyton Application Interface (API). Menurut (Salahuddin & Iramadhan, 2018), “ Sublime Text adalah teks editor berbasis Phyton, sebuah teks editor yang elegan,  kaya fitur, cross platform , mudah dan simpel yang cukup terkenal di kalangan developer , penulis, dan desainer”.
c) Adobe Photoshop CS7 Menurut (Putra, Nugroho, & Puspitarini, 2016), “ Adobe Photoshop adalah program aplikasi desain yang berguna untuk mendesain gambar, mengedit image grafis, dan mengolah foto digital”.

## METODE PENELITIAN
Tujuan pengembangan perangkat lunak adalah mengembangkan sistem dan memberikan panduan untuk menyukseskan  proyek  pengembangan  sistem  melalui  tahapan-tahapan  tertentu.  Metode  pengembangan perangkat lunak yang penulis gunakan adalah model waterfall .

## Tahapan Model Waterfall
Menurut (Rosa A.S, 2016), berikut adalah tahapan model waterfall :
a) Analisis Kebutuhan Perangkat Lunak
Proses  pengumpulan  kebutuhan  dilakukan  secara  untuk  menspesifikasikan  kebutuhan  perangkat  lunak  sesuai kebutuhan user . b) Desain
Proses yang fokus pada desain pembuatan program perangkat lunak, termasuk struktur data, arsitektur perangkat lunak, antar muka, dan prosedur pengkodean.
c) Pembuatan Kode Program
Desain harus diterjemahkan kedalam bahasa perangkat lunak agar dapat berjalan dengan lancar.
d) Pengujian
Tahap  ini  dilakukan  untuk  meminimalisir  kesalahan  dan  memastikan  keluaran  yang  dihasilkan  sesuai  dengan yang diinginkan.
e) Dukungan dan Pemeliharaan
Tahap ini digunakan untuk membuat pengembangan-pengembangan yang dibutuhkan oleh user setelah program sudah digunakan oleh user.

## HASIL DAN PEMBAHASAN
Pada  bagian  ini  dijelaskan  tahapan-tahapan  pembuatan  sistem  mulai  dari  analisa  kebutuhan  pengguna,  analisa kebutuhan sistem, pembuatan rancangan antarmuka, dan yang terakhir proses implementasi sistem.

## 1. Analisa Kebutuhan Pengguna
a) Kebutuhan Pengunjung
1) Dapat melihat data proyek
2) Dapat memberikan komentar terhadap proyek yang tersedia
b) Kebutuhan Admin
1) Login Admin
2) Dapat melihat data proyek yang dikelola
3) Dapat memperbarui perkembangan proyek yang dikelola
4) Dapat mengelola data jasa, material, foto dan nota dari proyek yang dikelola
5) Dapat mengubah password
c) Kebutuhan Staff
1) Login Staff
2) Dapat melihat dan mengelola seluruh data proyek
3) Dapat mengelola master data
4) Dapat mengelola data admin
5) Dapat mengakses dan mencetak laporan
6) Dapat mengubah password
d) Kebutuhan SysAdmin
1) Login SysAdmin
2) Dapat mengelola pengaturan web
Volume 1 No. 2 Februari2021
3) Dapat mengelola data staff
4) Dapat mengubah password
2. Analisa Kebutuhan Sistem
a) Hak Akses
1) Pengguna
Bersifat sebagai pengunjung dan hanya dapat mengakses data proyek dan memberikan komentar tentang proyek tersebut.
2) Admin
Bersifat limited user yang artinya hanya dapat mengakses menu tertentu yang diizinkan.
3) Staff
Bersifat unlimited user yang artinya dapat mengakses semua menu yang terdapat pada aplikasi.
4) SysAdmin
Bersifat limited user karena hanya dapat mengolah data staff dan beberapa pengaturan website saja.
b) Pengolahan Data
1) Fungsi Login digunakan untuk masuk kedalam sistem.
2) Fungsi Dashboard digunakan untuk menampilkan halaman depan.
3) Fungsi Data Proyek digunakan untuk melihat dan mengelola data proyek.
4) Fungsi Master Data digunakan untuk mengelola data yang akan digunakan saat proses input.
5) Fungsi Data Staff digunakan untuk melihat dan mengelola data staff .
6) Fungsi Penanggung Jawab digunakan untuk melihat dan mengelola data admin .
7) Fungsi Data Laporan digunakan untuk melihat dan mengunduh laporan.
8) Fungsi Ganti Password digunakan untuk mengubah password pengguna.
9) Fungsi Logout digunakan untuk keluar dari sistem.
c) Keamanan
1) Admin , Staff dan SysAdmin harus login dengan memasukan username dan password , jika tidak sesuai maka tidak dapat masuk ke halaman admin , staff ataupun sysadmin . 2) Halaman login dilengkapi  dengan captcha untuk  menghindari  pengisian  data  otomatis  yang dilakukan oleh komputer bot .
3) Password pengguna dienkripsi dengan enkripsi MD5.
4) Pengisian  komentar  pada  halaman  proyek  oleh  pengunjung  dilengkapi  dengan captcha untuk menghindari spam .
d) Hardware dan Software
1) Hardware
Hardware yang dibutuhkan dalam sistem ini adalah:
- Windows 10 sebagai Sistem Operasi
- Processor yang digunakan adalah Intel BYT-M 2Core 2840
- RAM 2GB
2) Software
- Sublime Text 3 sebagai text editor
- XAMPP yang didalamnya terdapat Apache sebagai web server dan MySQL sebagai database - HTML, PHP, JavaScript sebagai bahasa pemrograman
- Web Browser (Mozilla Firefox dan Google Chrome)
3. Rancangan Antar Muka
a) Rancangan Antar Muka Halaman Home Pengunjung
Gambar 1. Rancangan Antar Muka Halaman Home Pengunjung
Keterangan:
1) Pada bagian header terdapat logo aplikasi dan menu data proyek.
Volume 1 No. 2 Februari2021
2) Pada bagian konten terdapat logo Kabupaten Banyumas beserta logo aplikasi.
3) Pada halaman home pengunjung terdapat detail singkat dari data proyek.
4) Pada bagian footer berisi informasi seperti alamat kantor, akun sosial media, dan tentang aplikasi.
b) Rancangan Antar Muka Halaman Monitoring Pengunjung
Gambar 2. Rancangan Antar Muka Halaman Monitoring Pengunjung
Keterangan:
1) Pada halaman monitoring berisi detail lengkap dari data proyek.
2) Terdapat form untuk menambahkan komentar.
c) Rancangan Antar Muka Halaman Login Pengguna
Gambar 3. Rancangan Antar Muka Halaman Login Pengguna
Keterangan:
1) Pengguna harus memasukkan username , password dan captcha untuk dapat masuk kedalam sistem.
2) Setelah memasukkan username , password dan captcha pengguna menekan tombol “ Login ”.
d) Rancangan Antar Muka Halaman Dashboard Pengguna
Gambar 4. Rancangan Antar Muka Halaman Dashboard Pengguna Keterangan:
1) Pada  bagian header berisi  informasi  sesi login pengguna  serta  menu  untuk  ganti password dan logout .
2) Pada bagian sidebar terdapat menu data proyek, penanggung jawab, data laporan, ganti password dan logout .
3) Pada menu data laporan terdapat submenu laporan per proyek.
4) Pada halaman dashboard berisi detail singkat dari data proyek.
Volume 1 No. 2 Februari2021
e) Rancangan Antar Muka Halaman Data Proyek
Gambar 5. Rancangan Antar Muka Halaman Data Proyek
Keterangan:
1) Terdapat  tombol  “tambah  data  proyek”  pada  bagian  kiri  atas  halaman  untuk  menambahkan  data proyek.
2) Pada  halaman  data  proyek,  terdapat  data  proyek  yang  memiliki  menu  “ edit ”,  “hapus”,  “tambah material”  dan  foto”  serta  terdapat  tombol  “lihat  selengkapnya”  untuk  melihat  detail  lengkap  dari proyek tersebut.
f) Rancangan Antar Muka Halaman Proyek Detail
Gambar 6. Rancangan Antar Muka Halaman Proyek Detail
Keterangan:
1) Terdapat tombol “kembali”, “ edit ” dan “hapus” pada bagian kiri atas halaman.
2) Pada halaman proyek detail pengguna, terdapat data lengkap dari proyek yang sedang dibuka.
g) Rancangan Antar Muka Halaman Penanggung Jawab
Gambar 7. Rancangan Antar Muka Halaman Penanggung Jawab
Keterangan:
1) Pada halaman penanggung jawab di bagian kiri atas terdapat tombol “tambah data” untuk menambah data penanggung jawab (admin).
2) Terdapat tabel data penanggung jawab, apabila telah terisi data maka akan muncul tombol “ edit ” dan “hapus”.
Volume 1 No. 2 Februari2021
h) Rancangan Antar Muka Halaman Data Staff
Gambar 8. Rancangan Antar Muka Halaman Data Staff
Keterangan:
1) Pada halaman data staff di bagian kiri atas terdapat tombol “tambah data” untuk menambah data staff
2) Terdapat tabel data staff , apabila telah terisi data maka akan muncul tombol “ edit ” dan “hapus”.
Volume 1 No. 2 Februari2021
i) Rancangan Antar Muka Laporan Proyek
Gambar 9. Rancangan Antar Muka Halaman Data Laporan Proyek
Keterangan:
1) Terdapat tabel data laporan proyek.
2) Masing-masing data laporan proyek yang terisi memiliki tombol “cetak”.
j) Rancangan Antar Muka Halaman Ganti Password
Gambar 10. Rancangan Antar Muka Halaman Ganti Password
Keterangan:
1) Pada halaman ganti password di bagian kiri atas terdapat tombol “kembali” untuk pindah ke halaman dashboard .
2) Terdapat form untuk mengubah password pengguna.
4. Implementasi
a) Halaman Home Pengunjung
Gambar 11. Tampilan Home Pengunjung Bagian Atas
b) Halaman Monitoring Pengunjung
Gambar 12. Tampilan Monitoring Pengunjung Bagian Atas
Volume 1 No. 2 Februari2021
c) Halaman Login Pengguna
Gambar 13. Tampilan Login Pengguna d) Halaman Dashboard Pengguna
Gambar 14. Tampilan Dashboard Pengguna e) Halaman Data Proyek Gambar 15. Tampilan Data Proyek f) Halaman Tambah Data Proyek Gambar 16. Tampilan Tambah Data Proyek g) Halaman Proyek Detail
Gambar 17. Tampilan Halaman Proyek Detail h) Halaman Master Data
Volume 1 No. 2 Februari2021
i) Halaman Tambah Master Data Gambar 19. Tampilan Tambah Master Data j) Halaman Tambah Data Jasa Gambar 20. Tampilan Tambah Data Jasa k) Halaman Tambah Data Material Gambar 21. Tampilan Tambah Data Material l) Halaman Tambah Data Foto Gambar 22. Tampilan Tambah Data Foto
m) Halaman Tambah Data Nota
Gambar 23. Tampilan Tambah Data Nota
Volume 1 No. 2 Februari2021
n) Halaman Data Penanggung Jawab
Gambar 24. Tampilan Data Penanggung Jawab o) Halaman Tambah Data Penanggung Jawab Gambar 25. Tampilan Tambah Data Penanggung Jawab p) Halaman Laporan Proyek Gambar 26. Tampilan Halaman Laporan Proyek q) Halaman Dashboard SysAdmin Gambar 27. Tampilan Halaman Dashboard SysAdmin r) Halaman Data Staff
Volume 1 No. 2 Februari2021
s) Halaman Tambah Data Staff
Gambar 29. Tampilan Tambah Data Staff t) Halaman Ganti Password

## Gambar 30. Tampilan Ganti Password

## KESIMPULAN
Berdasarkan  hasil  analisa  dan  pembahasan  yang  telah  disusun  dari  pembuatan  mengenai  sistem informasi  monitoring  proyek  berbasis  web  pada  Desa  Somagede  Kabupaten  Banyumas,  maka  dapat  diambil kesimpulan sebagai berikut: Dengan menggunakan sistem terkomputerisasi dapat memberikan kemudahan bagi warga  desa  dalam  mencari  informasi  proyek  yang  sedang  berjalan  di  desa  tersebut  dan  juga  mempermudah perangkat  desa  dalam  mengolah  data  proyek  yang  ada,  menghindari  pengulangan  data  yang  sama,  yang menyebabkan  kesalahan  dalam  memberikan  informasi  data  proyek,  proses  penyimpanan  data  menggunakan perangkat  dan  media  penyimpanan  online  akan  lebih  menghemat  waktu  dan  juga  aman,  dalam  mencari  atau mengubah data-data proyek yang diperlukan akan menjadi mudah dan cepat.

## DAFTAR PUSTAKA
Gafar, A. (2016). Penggunaan Internet Sebagai Media Baru Dalam Pembelajaran. Jurnal Universitas Batanghari Jambi (p. 38).
Hartono, H. (2016). Pengertian Website dan Unsur-Unsurnya. Ilmu Teknologi Informasi (Ilmuti), 1–7.
Heryanto,  Imam  dan  Totok  Triwibowo.  2015.  Manajemen  Proyek  Berbasis  Teknologi  Informasi  :  Mengelola Proyek Secara Sistematis Menggunakan Microsoft Project. Bandung : Informatika.
Kahamdany,  H.,  Kusuma,  P.  D.,  Osmond,  A.  B.  (2018).  Pengembangan  Motif  Karang  Jenis  Leptoseris Papyracea Pada Aplikasi Batik Berbasis Web. e-Proceeding of Engineering (p. 1067).
Muslihudin,  M.,  Larasati,  A.  (2017).  Perancangan  Sistem  Aplikasi  Penerimaan  Mahasiswa  Baru  Di  STMIK Pringsewu Menggunakan PHP Dan MySQL. Jurnal TAM (p. 34).
Putra,  D.  W.,  Nugroho,  A.  P.,  Puspitarini,  E.  W.  (2016).  Game  Edukasi  Berbasis  Android  Sebagai  Media Pembelajaran Untuk Anak Usia Dini. JIMP – Jurnal Informatika Merdeka Pasuruan (p. 48).
Rosa A.S, M. S. (2016). Model Waterfall. 2016.
Salahuddin,  N.  S.,  Iramadhan,  N.  (2018).  Perancangan  E-Kuliner  Rumah  Jagung.  Seminar  Nasional  Sistem Informasi (p. 1066).
Shalahuddin, M., & Sukamto, R. A. (2018). Rekayasa Perangkat Lunak Terstruktur dan Berorientasi Objek Edisi Revisi. Jurnal Pilar Nusa Mandiri (pp. 25–41).
Sianipar, R. H. (2015). Pemrograman Javascript: Teori dan Implementasi. Penerbit INFORMATIKA.
Wijianto,  R.  (2017).  Perancangan  Sistem  Pendukung  Keputusan  Dalam  Pemilihan  Smartphone  Android Menggunakan Logika Fuzzy. Jurnal Evolusi (p.92).