Vol.
4 No.
2 Desember 2025 Hal 556-566 Https://ojs.
PENGEMBANGAN SISTEM INFORMASI GEOGRAFIS UNTUK PEMETAAN
JARINGAN DISTRIBUSI AIR DENGAN METODE AGILE
Dwiki Aditya Putra1*.
Indyah Hartami Santi2 1,2Fakultas Teknik dan Informatika.
Universitas Islam Balitar E-mail: dwikiadityaptr@gmail.
com1*, indyahartamisanti@gmail.
INFO ARTIKEL
ABSTRACT
Sejarah Artikel Diterima : 20/08/2025 Direvisi : 01/09/2025 Diterbitkan : 01/12/2025 *Corresponding author dwikiadityaptr@gmail.
DOI: 10.
70247/jumistik.
Https://ojs.
GRAPHICAL ABSTRACT
Management of water distribution networks still relies on desktop-based systems, which have limitations in remote access, multi-user collaboration, and real-time data updates.
This study aims to develop a web-based Geographic Information System (GIS) to map pipelines, customer locations, and damage reports interactively.
The system was built using the Laravel framework for the backend and the Leaflet.
js library for map visualization.
Development followed the Agile methodology in two iterations.
The first iteration focused on creating core functions, including pipeline mapping, customer data integration, and damage reporting features.
The second iteration involved refinements based on user evaluation feedback regarding usability and performance.
System testing was conducted through Blackbox Testing to verify functionality and User Acceptance Testing to assess user The results showed that all 81 Blackbox test scenarios were successfully executed with a 100% success rate, while UAT achieved a user acceptance score of 88.
The results indicate that the system is acceptable to users.
Keywords: Geographic Information System.
Website.
Agile
ABSTRAK
Pengelolaan jaringan distribusi air masih banyak bergantung pada sistem berbasis desktop, yang memiliki keterbatasan dalam akses jarak jauh, kolaborasi multi-pengguna, dan pembaruan data secara real-time.
Penelitian ini bertujuan mengembangkan Sistem Informasi Geografis (SIG) berbasis web untuk memetakan jaringan pipa, lokasi pelanggan, dan laporan kerusakan secara interaktif.
Sistem dibangun menggunakan framework Laravel pada sisi backend dan pustaka Leaflet.
js untuk visualisasi Pengembangan dilakukan dengan metode Agile melalui dua iterasi.
Iterasi pertama berfokus pada pembuatan fungsi inti, mencakup pemetaan pipa, integrasi data pelanggan, dan fitur pelaporan kerusakan.
Iterasi kedua berisi penyempurnaan berdasarkan masukan dari evaluasi pengguna terkait kemudahan penggunaan dan kinerja.
Pengujian sistem dilakukan menggunakan Blackbox Testing untuk memverifikasi fungsi serta User Acceptance Testing untuk menilai tingkat penerimaan pengguna.
Hasil menunjukkan seluruh 81 skenario pengujian Blackbox berhasil dengan tingkat keberhasilan 100%, sedangkan UAT memperoleh skor penerimaan sebesar 88,4%.
Hasil tersebut menunjukkan bahwa sistem dapat diterima Kata kunci: Sistem Informasi Geografis.
Website.
Agile A 2025 Penerbit STMIK Amika Soppeng.
All rights reserved .
556Ae566 | w.
id | eISSN 2964Ae3953 | PENDAHULUAN Sistem Informasi Geografis (SIG) merupakan seperangkat alat yang mampu mengumpulkan, menampilkan data spasial dari dunia nyata untuk tujuan tertentu .
Teknologi ini memadukan basis data, perangkat lunak, dan metode analisis spasial sehingga informasi yang dihasilkan dapat mendukung proses pengambilan keputusan.
Dalam konteks pengelolaan sumber daya air.
SIG memiliki peranan penting dalam memetakan, memantau, dan mengelola infrastruktur distribusi air secara akurat.
Pemetaan jaringan distribusi air yang tepat diperlukan meminimalkan kebocoran, serta mempercepat penanganan gangguan .
Perusahaan XYZ adalah sebuah badan usaha yang bergerak dalam penyediaan layanan air bersih kepada masyarakat.
Perusahaan ini bertanggung jawab atas penyediaan air minum yang aman, layak, dan berkelanjutan di wilayah operasionalnya.
Saat ini, cakupan pelayanan Perusahaan XYZ mencakup 13 kecamatan dengan jumlah pelanggan mencapai 750, di mana Kecamatan Wlingi menjadi salah satu wilayah dengan kepadatan pelanggan cukup tinggi, 994 pelanggan aktif .
Keandalan jaringan distribusi di wilayah ini menjadi prioritas karena kebutuhan air yang terus meningkat seiring pertumbuhan penduduk dan aktivitas ekonomi.
Meskipun memiliki tanggung jawab besar.
Perusahaan XYZ masih mengandalkan perangkat lunak berbasis desktop dalam pengelolaan data jaringan distribusi air.
Sistem ini memang telah berfungsi untuk memetakan jaringan pipa, namun memiliki sejumlah keterbatasan.
Salah satu kendala utama adalah sulitnya melakukan pembaruan data secara real-time.
Data yang diperbarui di lapangan sering kali memerlukan proses transfer manual sebelum dapat diakses oleh admin di kantor pusat.
Selain itu, koordinasi antar tim lapangan dan staf administrasi terhambat oleh sifat sistem yang hanya dapat diakses dari perangkat tertentu, sehingga mengurangi fleksibilitas kerja.
Sistem berbasis desktop juga memiliki kurva pembelajaran yang cukup tinggi, memerlukan perangkat keras khusus, dan tidak mendukung kolaborasi multi-user secara langsung .
Perkembangan teknologi berbasis web dalam beberapa tahun terakhir telah membuka peluang besar untuk mengatasi keterbatasan tersebut.
WebGIS, sebagai bentuk implementasi SIG berbasis web, dapat diakses melalui berbagai perangkat dengan koneksi internet, tanpa ketergantungan pada satu perangkat tertentu .
Teknologi ini mendukung pembaruan data secara cepat, mendukung kolaborasi multi-user, dan dapat diintegrasikan dengan pustaka visualisasi peta seperti Leaflet.
js untuk menyajikan data spasial secara interaktif .
Sejumlah penelitian telah menunjukkan potensi besar Web-GIS dalam manajemen distribusi air.
Misalnya.
Dwiki Aditya Putra et.
al / Vol.
4 No.
2 Desember 2025 hal 556Ae566 menampilkan jaringan pipa, titik pelanggan, dan informasi kerusakan secara interaktif telah digunakan sebagai dasar perencanaan jaringan, penanganan keluhan pelanggan, dan pengelolaan pemeliharaan .
Namun, sebagian besar penelitian tersebut belum secara mendalam membahas pengembangan WebGIS untuk distribusi air yang dirancang dengan pendekatan pengembangan perangkat lunak yang adaptif terhadap kebutuhan pengguna di lapangan.
Padahal, tingkat keberhasilan sebuah sistem informasi sangat dipengaruhi oleh metode pengembangan yang digunakan, terutama dalam konteks kebutuhan pengguna yang dinamis.
Metode Agile menjadi salah satu pendekatan yang relevan untuk situasi tersebut.
Agile menekankan pengembangan sistem yang dilakukan secara bertahap serta evaluasi berkelanjutan di setiap iterasi.
Hal berdasarkan masukan pengguna, sehingga produk akhir lebih selaras dengan kebutuhan nyata di lapangan .
Berbeda dengan metode tradisional seperti Waterfall yang cenderung kaku.
Agile memberikan ruang untuk fleksibilitas dan perbaikan Berdasarkan latar belakang tersebut, penelitian ini bertujuan untuk mengembangkan Sistem Informasi Geografis berbasis web yang dapat digunakan untuk memetakan jaringan distribusi air, lokasi pelanggan, serta pelaporan kerusakan secara interaktif.
Sistem ini dikembangkan menggunakan framework Laravel sebagai backend dan pustaka Leaflet.
js untuk visualisasi peta interaktif.
Pendekatan Agile digunakan dalam dua iterasi pengembangan.
Iterasi pertama berfokus pada pembuatan fitur inti seperti peta jaringan pipa, penandaan titik pelanggan, dan form pelaporan kerusakan.
Iterasi kedua digunakan untuk penyempurnaan berdasarkan hasil evaluasi dan umpan balik dari pengguna.
Pengujian sistem dilakukan menggunakan dua metode, yaitu Blackbox Testing untuk memastikan fungsi sistem sesuai spesifikasi, serta User Acceptance Testing (UAT) untuk menilai sejauh mana sistem dapat diterima dan digunakan oleh pengguna.
Diharapkan, hasil penelitian ini dapat memberikan kontribusi praktis dalam mendukung digitalisasi pengelolaan distribusi air, sekaligus memberikan bukti empiris bahwa pendekatan Agile dapat menghasilkan sistem yang responsif terhadap kebutuhan pengguna di sektor utilitas publik.
Dengan adanya Web-GIS yang dikembangkan, diharapkan Perusahaan XYZ dapat mengelola data jaringan distribusi air secara lebih akurat dan terintegrasi, sehingga perencanaan, pemeliharaan, dan pelayanan pelanggan dapat ditangani dengan lebih tepat sasaran.
Lebih jauh lagi, penelitian ini juga dapat menjadi referensi bagi pengembangan sistem serupa di daerah lain, khususnya bagi penyedia layanan air bersih yang ingin beralih dari sistem desktop konvensional ke solusi berbasis web yang lebih fleksibel dan adaptif terhadap perkembangan TINJAUAN PUSTAKA Sistem Informasi Geografis Sistem Informasi Geografis (SIG) merupakan sistem yang berfungsi untuk mengumpulkan, menyimpan, mengelola, dan menganalisis data geografis secara SIG digunakan untuk mengukur fenomena serta proses geospasial, kemudian merepresentasikan hasilnya dalam basis data komputer guna menampilkan pola spasial, objek, dan keterkaitan antar data.
Selain itu.
SIG mendukung analisis lanjutan terhadap representasi data untuk menghasilkan informasi tambahan serta mengidentifikasi hubungan baru melalui integrasi berbagai sumber data.
Dalam penerapannya.
SIG dapat disesuaikan dengan kerangka kerja entitas dan hubungan agar data yang ditampilkan lebih relevan.
Pemetaan Pemetaan adalah suatu proses pembuatan visualisasi yang merepresentasikan dari wilayah geografis yang ada di permukaan bumi.
Representasi ini biasanya dalam bentuk peta atau saat ini dikenal dengan istilah penambahan detail dan informasi yang relevan untuk berbagai tujuan keperluan berbagai sektor seperti keperluan navigasi, analisis lingkungan, perencanaan wilayah dan kota, serta berbagai keperluan riset aplikatif lainnya.
Jaringan Distribusi Air Jaringan distribusi air adalah kumpulan sistem terhubung dari sumber, pipa, dan kontrol hidrolik .
isalnya, pompa, katup, regulator, tangk.
yang mengalirkan air kepada konsumen dalam jumlah tertentu dengan tekanan dan kualitas air yang Sistem semacam ini sering digambarkan sebagai grafik, di mana tautan mewakili pipa, dan node mendefinisikan koneksi antara pipa, elemen kontrol hidrolik, konsumen, dan sumber.
Website Website adalah halaman atau kumpulan halaman web yang saling terhubung dan dapat diakses di seluruh dunia selama ada koneksi internet.
Setiap halaman web memiliki alamat unik yang dikenal sebagai URL (Uniform Resource Locato.
Website dapat berisi berbagai jenis informasi seperti teks, gambar, video, dan audio.
Selain itu, website juga dapat mencakup fitur interaktif seperti formulir kontak, komentar, atau fungsi obrolan.
Website terdiri dari dua komponen utama: client-side dan server-side.
Clientside merujuk pada bagian situs yang terlihat oleh pengguna melalui browser, seperti Google Chrome atau Internet Explorer.
Bagian ini terdiri dari HTML.
CSS, dan JavaScript untuk merancang dan menampilkan halaman web .
Laravel Laravel adalah sebuah framework PHP yang dirilis di bawah lisensi Massachusetts Institute of Technology Dwiki Aditya Putra et.
al / Vol.
4 No.
2 Desember 2025 hal 556Ae566 (MIT) dan dibangun dengan konsep MVC .
odel view Laravel adalah pengembangan website yang ditulis dalm PHP yang dirancang untuk meningkatkan kualitas perangkat lunak dengan mengurangi biaya pengembangan awal dan biaya pengalaman bekerja dengan aplikasi dengan menyediakan sintaks yang ekspresif, jelas, dan menghemat waktu.
LeafletJs Leaflet adalah pustaka JavaScript open-source yang sangat populer untuk membuat peta interaktif yang responsif terhadap perangkat mobile.
Dengan ukuran file JS yang hanya sekitar 42 KB.
Leaflet menawarkan berbagai fitur pemetaan yang dibutuhkan oleh mayoritas pengembang.
Fokus utama dari Leaflet kemudahan penggunaan.
Pustaka ini berfungsi dengan baik di semua platform desktop dan mobile utama, dapat diperluas dengan berbagai plugin.
API (Application Programming Interfac.
yang tidak hanya indah tetapi juga mudah digunakan dan terdokumentasi dengan baik .
Metode Pengembangan Agile Metode Agile merupakan metode pengembangan bertahap yang menekankan pada kecepatan pengembangan, perangkat lunak yang dirilis secara bertahap, pengurangan beban proses, serta menghasilkan kode berkualitas tinggi, dengan melibatkan pelanggan langsung dalam proses Pendekatan pelanggan untuk mendapatkan umpan balik yang cepat terkait perubahan kebutuhan.
Selain itu, metode ini mengurangi dokumentasi dengan mengutamakan komunikasi informal, dibandingkan dengan pertemuan formal yang memerlukan dokumen tertulis .
Balckbox Testing Pengujian fungsional, yang sering dikenal sebagai pengujian black-box, adalah pengujian yang tidak mencoba menganalisis kode yang menghasilkan melainkan, fokus utamanya hanya pada pengamatan hasil berdasarkan nilai input tertentu.
Struktur internal program diabaikan.
Oleh karena itu, pengujian fungsional terkadang disebut sebagai pengujian black-box .
uga disebut pengujian perilak.
, di mana input dan output dari "black box" adalah satu-satunya cara untuk memahami cara kerjanya dan isinya tidak diketahui .
User Acceptance Testing (UAT) User Acceptance Testing (UAT) adalah pengujian yang dilakukan oleh pengguna akhir, yang biasanya merupakan staf atau karyawan perusahaan yang akan berinteraksi langsung dengan sistem.
Tujuan dari User Acceptance Testing (UAT) adalah untuk memastikan bahwa fitur-fitur dalam sistem berfungsi sesuai dengan yang diinginkan dan sesuai dengan persyaratan yang telah ditetapkan.
Pengujian ini dilakukan setelah pengujian sistem selesai untuk memastikan perangkat lunak memenuhi standar yang telah ditentukan .
Dwiki Aditya Putra et.
al / Vol.
4 No.
2 Desember 2025 hal 556Ae566 Tahapan Penelitian Alur penelitian ini, yang meliputi perumusan masalah hingga pengembangan sistem secara iteratif dengan model Agile, dijelaskan pada Gambar 2 berikut.
Penelitian ini menghadirkan kebaruan melalui penerapan metode pengembangan Agile pada sistem berbasis web yang menggunakan Leaflet.
untuk peta interaktif.
Sistem mendukung kolaborasi multi-user dan dievaluasi melalui User Acceptance Testing (UAT) untuk menilai penerimaan oleh admin dan petugas lapangan.
Peta interaktif mendukung visualisasi data geospasial secara dinamis, termasuk zoom, pan, dan pop-up yang menampilkan informasi Fitur ini mempermudah petugas dalam mengakses detail jaringan pipa dan data pelanggan, sehingga proses pencarian dan pemantauan menjadi lebih cepat dan akurat.
Mulai Perumusan Masalah Pengumpulan Data
Wawancara
Observasi
Studi Literatur
Requirement Planning Analisa Kebutuhan Sistem
Design
Desain Sistem
METODE AGILE
- Use case diagram - Sequence diagram - Class diagram -Component diagram - Activity diagram -Struktur Program
METODOLOGI PENELITIAN
Roadmap Penelitian Gambar roadmap penelitian seperti yang ditunjukkan pada gambar 1 ini menggambarkan rencana pengembangan Sistem Informasi Geografis (SIG) berbasis web untuk pemetaan jaringan distribusi air dalam tiga tahap tahunan.
Tahun 1 .
aat in.
berfokus pada pembangunan Web-GIS untuk pemetaan jaringan pipa dan titik pelanggan menggunakan Laravel dan Leaflet.
pengelolaan data inti, serta fitur pelaporan.
Tahun 2 direncanakan pengembangan modul Analytical Hierarchy Process (AHP) untuk analisis potensi air tanah yang terintegrasi dengan Web-GIS, sehingga dapat mendukung perencanaan sumber air baru.
Tahun 3 direncanakan pada perluasan cakupan pemetaan ke seluruh area layanan perusahaan, disertai peningkatan kapabilitas operasional seperti role-based access, audit trail, dan dashboard wilayah.
Development(Pengkodea.
Testing(Pengujia.
Pengujian Tidak - Blackbox Testing - User Acceptance Testing Deployment(Penyampaia.
Feedback Sudah Sesuai Kebutuhan? Launch Kesimpulan dan Saran Selesai Gambar 2.
Tahapan Penelitian Sumber : Hasil Olah Data Gambar 1.
Roadmap Penelitian Sumber : Hasil Olah Data Desain Interface Perumusan Masalah Penelitian berawal dari identifikasi keterbatasan sistem pemetaan distribusi air di Perusahaan XYZ, yang masih berbasis desktop, hanya dapat diakses dari perangkat tertentu, membutuhkan sinkronisasi data 1Ae2 hari, dan tidak mendukung kolaborasi multi-user.
Pengumpulan Data Data dikumpulkan melalui observasi, wawancara dengan staf, dan kajian literatur.
Observasi menilai kondisi sistem di lapangan, wawancara menggali kebutuhan dan prosedur, sementara kajian literatur digunakan untuk memperkuat validasi.
Requirement Planning Kebutuhan diidentifikasi dari hasil pengumpulan data untuk dianalisis sehinga menjadi dasar perancangan SIG berbasis web yang sesuai dengan kebutuhan operasional.
Design Perancangan meliputi arsitektur sistem, alur kerja, tata letak antarmuka, dan pembuatan diagram UML .
se case, activity, class, sequence.
Development Pengembangan Laravel .
dan Leaflet.
eta interakti.
Fitur utama mencakup navigasi peta, pencarian lokasi, zoom/pan, dan popup detail jaringan.
Testing Pengujian Dua pendekatan yang digunakan adalah Blackbox Testing dan User Acceptance Testing (UAT).
Blackbox untuk menguji fungsionalitas sementara UAT untuk menguji penerimaan pengguna.
Deployment Sistem di-hosting pada server agar dapat diakses secara daring.
Feedback Proses pengumpulan feedback dari pengguna dilakukan melalui User Acceptance Testing (UAT) untuk mengevaluasi sejauh mana memenuhi kebutuhan.
Kesimpulan dan Saran Penelitian ini ditutup dengan penyampaian berdasarkan temuan dan penelitian yang telah Pengumpulan Data Teknik ini dipilih untuk memperoleh data dari sumber primer secara langsung serta melengkapi data sekunder yang relevan.
Setiap teknik pengumpulan data disesuaikan dengan karakteristik variabel yang diteliti dan instrumen yang digunakan, sehingga hasil penelitian dapat merepresentasikan kondisi yang Wawancara Wawancara merupakan metode pengumpulan data yang digunakan untuk memperoleh informasi secara rinci dari pihak yang memiliki pengalaman Melalui wawancara, diperoleh gambaran menyeluruh mengenai kebutuhan sistem, permasalahan yang dihadapi, serta saran terhadap fitur yang diharapkan pada sistem pemetaan.
Informasi ini menjadi dasar penting dalam menentukan arah pengembangan sistem.
Observasi Observasi lapangan dilakukan untuk mendapatkan pemahaman yang lebih akurat mengenai kondisi aktual dan proses kerja yang berlangsung.
Kegiatan ini mencakup pengamatan terhadap prosedur pengelolaan data, teknik pemetaan yang digunakan, serta teknologi pendukung yang telah diterapkan.
Observasi juga membantu keterlambatan dalam pembaruan informasi atau keterbatasan akses data.
Hasilnya dimanfaatkan acuan dalam merancang sistem menyesuaikan dengan kebutuhan pengguna.
Dwiki Aditya Putra et.
al / Vol.
4 No.
2 Desember 2025 hal 556Ae566 Studi Literatur Studi literatur dilakukan untuk memperdalam pemahaman terkait konsep, metode, dan tujuan penelitian, sekaligus menelaah penelitian terdahulu yang relevan.
Hasil kajian ini digunakan untuk membentuk kerangka penelitian yang sistematis.
Sistem Informasi Geografis (SIG) berbasis web.
Tahapan Pengembangan Penelitian Agile pengkodean, pengujian, dan umpan balik.
Requirement Planning Sesuai dengan hasil wawancara dan observasi yang telah dilakukan, ditemukan bahwa dibutuhkan sebuah Sistem Informasi Geografis (SIG) berbasis web yang dapat memudahkan admin dan petugas lapangan dalam pemetaan dan pengelolaan jaringan distribusi air.
Hasil dari perencanaan kebutuhan disajikan pada tabel 1 dan 2 berikut.
Tabel 1.
Kebutuhan Hardware Komponen
Perangkat
Prosesor
RAM
Komponen
Sistem
Operasi
Perangkat
Lunak
Server Lokal
Framework
Database Spesifikasi Minimum
Personal Computer (PC) Intel Core i5
4 GB
Tabel 2.
Kebutuhan Software Spesifikasi Minimum
Windows 10
Visual Studio Code
XAMPP
Laravel MySQL Design Tahap desain mengacu pada rancangan yang mencakup perancangan arsitektur sistem, alur kerja, dan tata letak antarmuka.
Desain sistem dijelaskan menggunakan diagram UML seperti use case diagram, class diagram, sequence diagram, dan component diagram.
Usecase Diagram pada gambar 3 merepresentasikan fungsionalitas dalam Sistem Informasi Geografis (SIG) yang digunakan oleh dua aktor utama, yaitu Admin dan Petugas Lapangan.
Admin memiliki akses penuh terhadap fitur Manajemen Pelanggan.
Manajemen Pipa.
Manajemen User, serta proses Login.
Sementara itu.
Petugas Lapangan memiliki akses terbatas, yaitu pada Manajemen Pelanggan.
Manajemen Pipa, dan Login.
Semua fitur utama dilengkapi dengan aksi-aksi seperti Tambah.
Ubah.
Hapus, dan Tampilkan Peta yang merupakan bagian dari proses utama dalam manajemen data pelanggan maupun pipa.
Dwiki Aditya Putra et.
al / Vol.
4 No.
2 Desember 2025 hal 556Ae566 Gambar 5.
Activity Diagram Login Sumber : Hasil Olah Data Gambar 3.
Use Case Diagram Sumber : Hasil Olah Data Diagram sekuens pada gambar 4 menggambarkan alur interaksi antara admin, antarmuka pengguna (Vie.
Controller, dan Database dalam proses manajemen data.
Proses dimulai dari admin melakukan Login, kemudian diverifikasi oleh controller melalui pengecekan data ke database.
Jika berhasil, admin diarahkan ke Dashboard.
Selanjutnya, ketika admin menampilkan data pelanggan, sistem akan mengambil data dari database dan menampilkannya di antarmuka.
Untuk penambahan atau perubahan data, admin mengisi form yang dikirim ke controller, lalu data disimpan atau diperbarui di database dan hasilnya ditampilkan kembali.
Gambar 6 merepresentasikan langkah administrator dalam melihat data pelanggan.
Administrator memilih opsi tampilan, dan sistem menampilkan tabel Jika administrator ingin menampilkan lokasi pelanggan, sistem akan menampilkan data dan koordinat lokasi secara bersamaan.
Gambar 6.
Activity Tampilkan Data Sumber : Hasil Olah Data Diagram pada gambar 7 menunjukkan prosedur penambahan data baru ke Administrator menampilkan form input, lalu pengguna mengisi informasi termasuk lokasi.
Setelah data disimpan, sistem akan menampilkan data yang berhasil Gambar 4.
Sequence Diagram Sumber : Hasil Olah Data Diagram pada gambar 5 menggambarkan alur proses autentikasi pada sistem.
Administrator memasukkan username dan password, kemudian sistem melakukan Jika dikembalikan ke pengguna.
Jika valid, sistem menampilkan Dashboard.
Gambar 7.
Activity Tambah Data Sumber : Hasil Olah Data Dwiki Aditya Putra et.
al / Vol.
4 No.
2 Desember 2025 hal 556Ae566 Diagram kelas pada gambar 8 menggambarkan struktur entitas utama beserta hubungan antara controller dan model dalam arsitektur MVC(Model.
View.
Controlle.
Terdapat tiga entitas utama yaitu Pelanggan.
User, dan Pipa, yang masing-masing memiliki controller tersendiri PelangganController.
UserController, dan PipaController, dengan fungsifungsi standar seperti index(), create(), store(), update(), dan destroy().
Gambar 9.
Component Diagram Sumber : Hasil Olah Data Gambar 10 merupakan layout Halaman Login yang akan menampilkan form autentikasi yang terdiri atas isian email atau username dan password, dilengkapi tombol Login serta tautan daftar.
Gambar 8.
Class Diagram Sumber : Hasil Olah Data Component diagram pada Gambar 9 menunjukkan arsitektur modular SIG yang terbagi dalam tiga lapisan utama, yaitu View.
Controller, dan Model.
View berfungsi sebagai antarmuka pengguna yang terhubung dengan tiga controller utama yaitu PelangganController.
PipaController.
UserController.
Setiap controller berinteraksi dengan model terkait Pelanggan.
Pipa, dan User yang merepresentasikan struktur data dan aturan bisnis, lalu terhubung ke tabel basis data pelanggans, pipas, dan Gambar 10.
Layout Login Sumber : Hasil Olah Data Gambar 11 merupakan rancangan konten untuk setiap halaman dari sistem informasi geografis (SIG).
Layout halaman ini terdiri dari dua komponen utama.
Di bagian kanan terdapat komponen peta interaktif yang menampilkan visualisasi geografis data, sementara sebelah kiri untuk menu navigasi.
Gambar 11.
Layout Halaman Peta Sumber : Hasil Olah Data Dwiki Aditya Putra et.
al / Vol.
4 No.
2 Desember 2025 hal 556Ae566
HASIL DAN PEMBAHASAN
Hasil Development Tampilan Login Gambar 12 menunjukkan hasil tampilan login yang berisi input email dan password serta pesan kesalahan jika kredensial tidak valid.
Proses autentikasi memeriksa data dari basis data dan mengarahkan pengguna ke halaman dashboard jika sesuai.
Tersedia tautan pendaftaran yang memerlukan persetujuan super admin sebelum akun dapat digunakan untuk login.
Gambar 12.
Tampilan Login Sumber : Hasil Olah Data Gambar 14.
Tampilan Dashboard Iterasi 2 Sumber : Hasil Olah Data Tampilan Peta Pelanggan Fitur peta pelanggan seperti pada gambar 15 dikembangkan menggunakan pustaka Leaflet untuk menampilkan persebaran geografis seluruh pelanggan dalam bentuk marker interaktif.
Marker menampilkan informasi rinci melalui jendela popup, termasuk nama, alamat, status, serta tombol navigasi menuju lokasi pelanggan menggunakan Leaflet Routing Machine.
Tampilan Dashboard Halaman Dashboard iterasi 1 ditunjukkan pada gambar 13 berfungsi sebagai pusat informasi ringkas yang menyajikan statistik utama sistem dalam bentuk komponen visual.
Informasi yang ditampilkan meliputi jumlah total pelanggan, jumlah pelanggan aktif dan nonaktif, total jaringan pipa, serta jumlah petugas.
Gambar 15.
Peta Pelanggan Iterasi 1 Sumber : Hasil Olah Data Gambar 13.
Tampilan Dsahboard Itersi 1 Sumber : Hasil Olah Data Halaman Dashboard iterasi 2 ditunjukkan pada gambar 14 telah diperbaiki untuk meningkatkan penggunaan oleh admin dan petugas lapangan.
Perubahan ini mencakup penataan ulang elemen antarmuka menjadi lebih terstruktur dan responsif, serta penerapan warna untuk membedakan status data secara visual.
Gambar 16 menunjukkan hasil perbaikan halaman Data Pelanggan yang telah difokuskan pada peningkatan keterbacaan dan aksesibilitas Elemen-elemen visual seperti indikator total pelanggan, status aktif dan nonaktif, serta data koordinat ditambahkan di bagian atas halaman sebagai ringkasan data.
Selain itu, fitur pencarian dan filter diperluas agar dapat mengelompokkan data pelanggan secara lebih Gambar 16.
Peta Pelanggan Iterasi 2 Sumber : Hasil Olah Data Dwiki Aditya Putra et.
al / Vol.
4 No.
2 Desember 2025 hal 556Ae566 Tampilan Peta Jaringan Pipa Gambar 17 merupakan hasil implementasi pemetaan dalam halaman peta jaringan pipa.
Peta jaringan pipa divisualisasikan menggunakan Leaflet.
merepresentasikan jalur distribusi air.
Gambar 19.
Halaman Laporan Sumber : Hasil Olah Data .
Testing Gambar 17.
Tampilan Jaringan Pipa Sumber : Hasil Olah Data Halaman Petugas Halaman Data Petugas seperti pada gambar 18 hanya dapat diakses oleh Admin untuk mengelola daftar pengguna yang mencakup petugas lapangan dan admin.
Pengaturan peran dan SuperAdmin, dilengkapi tombol aksi untuk mengaktifkan dan menonaktifkan petugas.
Gambar 18.
Tampilan Halaman Petugas Sumber : Hasil Olah Data Halaman Laporan Halaman Laporan Kerusakan seperti pada gambar 19 merupakan fitur tambahan pada halaman jaringan pipa yang dirancang untuk mencatat insiden kerusakan jaringan distribusi air.
Bagian atas halaman memuat formulir pelaporan yang terdiri atas elemen input informasi kerusakan.
Pada bagian bawah komponen riwayat laporan yang menampilkan daftar laporan sebelumnya dan tombol aksi untuk melihat detail atau menghapus entri.
Tabel 3.
Pengujian Blackbox No.
Page Skenario Pengujian Input yang tepat Klik menu Dashboard Login Dashboard Peta Pelanggan Membuka menu Peta Pelanggan Peta Jaringan Pipa Laporan Kerusakan Membuka menu Peta Jaringan Pipa Membuka Laporan Petugas Membuka Halaman Petugas Hasil Akan Dashboard Hasil Akan Dashboard Halaman tanpa error Halaman peta jaringan pipa terbuka tanpa error Halaman tanpa error Halaman tanpa error Sesuai Sesuai Sesuai Sesuai Sesuai Sesuai Pengujian dilakukan terhadap 81 skenario uji yang mencakup enam halaman utama dalam sistem.
Berdasarkan hasil pengujian, seluruh skenario berhasil dijalankan tanpa ditemukan kesalahan fungsional, sehingga diperoleh tingkat akurasi sebesar 100%.
Deployment Proses deployment aplikasi dilakukan pada layanan shared hosting Hostinger dengan memanfaatkan fitur File Manager yang tersedia di hPanel.
Struktur folder Dwiki Aditya Putra et.
al / Vol.
4 No.
2 Desember 2025 hal 556Ae566 proyek Laravel disesuaikan, di mana seluruh isi folder public dipindahkan ke dalam direktori public_html, sedangkan folder aplikasi lainnya seperti app, routes, vendor, dan resources tetap ditempatkan di luar public_html.
Sistem yang telah di-deploy kemudian dibagikan melalui tautan kepada pengguna untuk digunakan, sehingga masukan dan umpan balik dapat dikumpulkan pada tahap feedback berikutnya.
Kategori Jawaban STS Total Skor Skor Frekuensi Total skor ycE = 500 y 100% ycE = 88,4% Hasil User Acceptance Testing (UAT) pada iterasi 2 menunjukkan bahwa nilai rata-rata persentase sebesar 88,4%.
Berdasarkan interpretasi skor penilaian, nilai tersebut berada dalam kategori AuSangat SetujuAy, yang mengindikasikan bahwa pengguna sangat menyetujui sistem yang telah dikembangkan dan menyatakan bahwa sistem dapat diterima serta layak untuk digunakan.
KESIMPULAN DAN SARAN
Gambar 20.
Deployment Web Sumber : Hasil Olah Data .
Feedback Tabel 4.
User Acceptance Testing Iterasi 1 Kategori Jawaban Sangat Setuju Skor Frekuensi Total skor Setuju Kurang Setuju Tidak Setuju Sangat Tidak Setuju Total Skor ycycuycycayco ycuycnycoycaycn ycE = ycycoycuyc ycnyccyceycayco y 100% ycE= y 100% ycE = 81,2% .
Hasil pengujian User Acceptance Testing (UAT) pada iterasi pertama menunjukkan bahwa nilai rata-rata persentase sebesar 81,2% diperoleh dari seluruh pernyataan yang diajukan kepada dua kelompok pengguna, yaitu staf admin dan staf lapangan.
Berdasarkan interpretasi penerimaan, nilai tersebut berada dalam kategori AuSangat SetujuAy, yang mengindikasikan bahwa sistem pada tahap ini telah diterima dengan baik oleh pengguna dan dianggap layak digunakan sesuai tujuan pengembangannya.
Meskipun demikian, terdapat beberapa catatan perbaikan yang menjadi masukan untuk iterasi berikutnya, meliputi penambahan fitur laporan peningkatan fitur pencarian data pelanggan, serta perbaikan tampilan marker pada peta pelanggan.
Tabel 5.
User Acceptance Testing Iterasi 2 Kategori Jawaban Skor Frekuensi Total skor Kesimpulan Berdasarkan hasil penelitian dan pengembangan, dapat disimpulkan bahwa Sistem Informasi Geografis (SIG) berbasis web untuk pemetaan jaringan distribusi air berhasil dikembangkan menggunakan metode Agile dalam dua iterasi.
Iterasi pertama difokuskan pada pengembangan fitur dasar seperti pemetaan pelanggan dan jaringan pipa, manajemen data, dan dashboard, sedangkan iterasi kedua menitikberatkan pada penyempurnaan sistem berdasarkan masukan pengguna, meliputi penambahan fitur laporan kerusakan, perbaikan tampilan marker peta, dan fungsi pencarian.
Sistem ini dibangun dengan framework Laravel sebagai backend dan Leaflet.
sebagai library pemetaan untuk menampilkan jaringan distribusi air secara interaktif.
Hasil pengujian menunjukkan bahwa seluruh fungsi utama berjalan dengan baik dan sesuai harapan.
Pengujian menggunakan Blackbox Testing terhadap 81 skenario menunjukkan tingkat keberhasilan 100%, yang berarti seluruh fungsi telah bekerja sesuai rancangan.
Sementara itu, hasil User Acceptance Testing (UAT) oleh admin dan petugas lapangan menghasilkan skor rata-rata 88,4%, yang menunjukkan bahwa pengguna sangat setuju sistem dapat diterima untuk mendukung kebutuhan operasional.
Saran Berdasarkan hasil pengembangan, beberapa rekomendasi pengembangan selanjutnya meliputi:
Visualisai dapat ditingkatkan dengan warna marker yang lebih informatif.
Perlu untuk melengkapi data teknis pipa untuk pemantauan jaringan yang lebih akurat.
Disarankan untuk mengembangkan fitur mengubah status penanganannya.
Dwiki Aditya Putra et.
al / Vol.
4 No.
2 Desember 2025 hal 556Ae566
DAFTAR PUSTAKA