Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 4.
Nomor: 3.
September 2025: 230-247 https://jurnal.
unity-academy.
id/index.
php/jirsi/index e-ISSN 2830-3954 p-ISSN 2830-6031 Perancangan Website Monitoring Data SUTM PLN Menggunakan Metode Design Thinking Design of a Website for Monitoring PLN SUTM Data Using the Design Thinking Method Aulia Ramadhani Lubis*1.
Heri Santoso2 1,2Sistem Informasi.
Universitas Islam Negeri Sumatera Utara E-mail: 1 auliaramadhanilubis18@gmail.
com, 2herisantoso@uinsu.
Abstrak Penelitian ini bertujuan untuk mengembangkan antarmuka situs web yang memungkinkan pemantauan Data Saluran Udara Tegangan Menengah (SUTM) di PT PLN UP3 Lubuk Pakam dengan harapan meningkatkan efektivitas pemantauan jaringan listrik secara langsung.
Metodologi yang diterapkan adalah design thinking yang terdiri dari lima langkah, yaitu memahami, mendefinisikan, mengideakan, membuat prototipe, dan menguji.
Untuk mengetahui kebutuhan pengguna, dilakukan pengamatan langsung di lapangan yang kemudian dianalisis dengan cara deskriptif-kualitatif, dan hasil analisis tersebut disajikan dalam bentuk diagram seperti flowchart dan use case.
Antarmuka ini dirancang menggunakan Figma dan menghasilkan prototipe yang berbasis Single Page Application (SPA) dengan beberapa halaman utama, termasuk: Dashboard.
Peta Jaringan.
Monitoring Data.
Laporan Gangguan dan Inspeksi.
Riwayat Inspeksi, dan modal Login.
Setiap halaman dirancang untuk menampilkan data teknis seperti arus, tegangan, suhu kabel, dan status infrastruktur melalui grafik interaktif Chart.
js serta visualisasi peta yang memanfaatkan Google Maps API.
Sistem ini juga memiliki fitur untuk mengekspor data ke dalam format Excel atau PDF demi keperluan pelaporan.
Evaluasi dilakukan dengan uji unit di setiap halaman antarmuka yang mencakup kejelasan tampilan, interaktivitas filter, kecepatan navigasi, dan fungsionalitas ekspor.
Hasil pengujian menunjukkan bahwa semua unit beroperasi seperti yang diharapkan oleh pengguna.
Antarmuka ini dinilai responsif, informatif, dan mudah digunakan.
Prototipe juga sudah disiapkan untuk terintegrasi dengan backend berbasis IoT serta sistem basis data real-time.
Diharapkan bahwa desain ini bisa meningkatkan efisiensi dalam pemantauan dan pengambilan keputusan teknis, serta menjadi contoh pengembangan sistem serupa di unit PLN lainnya untuk memperkuat keandalan distribusi listrik di tingkat nasional.
Kata kunci: Antarmuka website.
Design Thinking.
Monitoring SUTM.
PLN UP3.
Prototipe SPA Abstract This research aims to develop a website interface that allows the monitoring of Medium Voltage Air Channel Data (SUTM) at PT PLN UP3 Lubuk Pakam with the hope of improving the effectiveness of direct power network monitoring.
The methodology applied is design thinking, which consists of five steps: empathize, define, ideate, prototype, and test.
understand user needs, direct observations were made in the field, which were then analyzed descriptively-qualitatively, and the results of the analysis are presented in the form of diagrams such as flowcharts and use cases.
This interface is designed using Figma and results in a prototype that is based on a Single Page Application (SPA) with several main pages, including: Dashboard.
Network Map.
Data Monitoring.
Disturbance and Inspection Reports.
A 2025 The Author.
Published by UNITY ACADEMY .
This is an open access article under the CC BY-SA license .
ttp://creativecommons.
org/licenses/by-sa/4.
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 4.
Nomor: 3.
September 2025: 230-247 https://jurnal.
unity-academy.
id/index.
php/jirsi/index e-ISSN 2830-3954 p-ISSN 2830-6031 Inspection History, and Login modal.
Each page is designed to display technical data such as current, voltage, cable temperature, and infrastructure status through interactive Chart.
graphs as well as map visualizations that utilize the Google Maps API.
The system also features the ability to export data in Excel or PDF format for reporting purposes.
Evaluation is conducted with unit tests on each interface page that include clarity of view, filter interactivity, navigation speed, and export functionality.
Testing results show that all units operate as expected by users.
This interface is rated as responsive, informative, and user-friendly.
prototype has also been prepared to be integrated with an IoT-based backend and real-time database system.
It is expected that this design can improve efficiency in monitoring and technical decision-making, as well as serve as an example for the development of similar systems in other PLN units to strengthen the reliability of electricity distribution at the national level.
Keywords: Website interface.
Design Thinking.
SUTM Monitoring.
PLN UP3.
SPA Prototype PENDAHULUAN Perkembangan teknologi informasi dan komunikasi telah memberikan dampak besar pada berbagai sektor, termasuk sektor energi.
Di Indonesia.
PT PLN (Perser.
sebagai penyedia listrik utama memiliki tanggung jawab untuk menjaga pasokan yang andal dan efisien.
Salah satu elemen penting dalam sistem distribusi adalah Saluran Udara Tegangan Menengah (SUTM), yang mentransfer energi dari gardu induk menuju pelanggan.
Gangguan pada jaringan SUTMAiseperti ketidakseimbangan arus, kenaikan suhu kabel, atau kerusakan infrastrukturAi dapat mengganggu kontinuitas pasokan dan mengurangi kualitas layanan energi.
Oleh karena itu, diperlukan sistem monitoring yang efektif, real-time, dan mudah digunakan untuk mendukung keandalan distribusi listrik PLN.
Beberapa penelitian terkait telah diangkat dalam literatur terbaru.
Misalnya.
Anwar Sodik et al.
menerapkan metode Design Thinking dalam perancangan antarmuka monitoring aplikasi skripsi berbasis website, yang terbukti meningkatkan kualitas UI/UX secara signifikan .
Selain itu.
Pradita Maulidya Effendi et al.
mengembangkan prototipe aplikasi evaluasi pembelajaran dengan pendekatan Design Thinking, menghasilkan peningkatan efektivitas, efisiensi, dan kepuasan pengguna .
Studi lain seperti oleh Novita Kurnia Ningrum et .
juga menunjukkan bahwa pendekatan serupa efektif digunakan dalam merancang UI/UX aplikasi berbasis monitoring .
Meskip un penelitian-penelitian tersebut berhasil menerapkan Design Thinking untuk UI/UX aplikasi berbasis web, sebagian besar fokusnya masih pada konteks pendidikan atau sosial, serta belum menjangkau aplikasi monitoring infrastruktur kelistrikan seperti SUTM.
Hal ini menciptakan kekosongan penelitian yang perlu diisi, mengingat antarmuka yang intuitif dan interaktif penting untuk keberhasilan sistem monitoring di sektor energi.
Untuk mengatasi gap tersebut, penelitian ini berinovasi dengan merancang prototype antarmuka website A 2025 The Author.
Published by UNITY ACADEMY .
This is an open access article under the CC BY-SA license .
ttp://creativecommons.
org/licenses/by-sa/4.
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 4.
Nomor: 3.
September 2025: 230-247 https://jurnal.
unity-academy.
id/index.
php/jirsi/index e-ISSN 2830-3954 p-ISSN 2830-6031 monitoring data SUTM PLN menggunakan pendekatan Design Thinking, yang dirancang berdasarkan kebutuhan pengguna dan konteks operasional PLN.
Dengan demikian, tujuan utama penelitian ini adalah menghasilkan prototype desain antarmuka website yang mampu menyajikan data kondisi jaringan SUTM PLN secara informatif, real-time, dan mudah digunakan oleh pengguna, sehingga mendukung pengambilan keputusan yang lebih cepat dan tepat.
METODOLOGI PENELITIAN
Jenis Penelitian Penelitian ini menggunakan pendekatan design thinking.
Design Thinking merupakan sebuah pendekatan yang mengintegrasikan pemikiran analitis serta kreatif dalam proses berfikir serta menawarkan solusi dalam memecahkan masalah .
Metode pendekatan design thinking berfokus pada integrasi kebutuhan pengguna dan kapabilitas teknologi.
Dalam hal ini terdapat 5 langkah utama dalam metode design thinking yang harus dilakukan, yaitu Emphatize.
Define.
Ideate.
Prototype dan yang terakhir Testing .
Menjelaskan kronologis penelitian termasuk cara menyiapkan bahan penelitian, rancangan atau desain penelitian, prosedur penelitian .
alam bentuk algoritma, pseudocode atau lainny.
, cara pengujian dan pengambilan data.
Pada bagian ini boleh juga diberikan dasar teori.
Tabel dan Gambar dibuat center seperti di bawah ini dan diacu pada naskah.
Emphatize Define Ideate Prototype Testing Gambar 1.
Tahapan Design Thinking Tahapan Penelitian Identifikasi Masalah Observasi Analisis Data Membuat Diagram ( Flowchart.
Use Case Diagram A 2025 The Author.
Published by UNITY ACADEMY .
This is an open access article under the CC BY-SA license .
ttp://creativecommons.
org/licenses/by-sa/4.
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 4.
Nomor: 3.
September 2025: 230-247 https://jurnal.
unity-academy.
id/index.
php/jirsi/index e-ISSN 2830-3954 p-ISSN 2830-6031 Perancangan Prototype Evaluasi dan Uji Coba Gambar 2.
Diagram Penelitian Identifikasi Masalah PLN UP3 Lubuk Pakam saat ini masih menghadapi masalah dalam pemantauan data SUTM (Saluran Udara Tegangan Menenga.
Sistem yang ada belum sepenuhnya terintegrasi dalam satu platform yang dapat menampilkan peta jaringan, status beban, dan arus secara waktu nyata.
Selain itu, situs web yang ada hanya menawarkan fitur pemantauan yang terbatas, tanpa kemampuan untuk mengekspor laporan secara langsung dan belum memiliki antarmuka yang memudahkan akses cepat bagi Masalah ini menunjukkan perlunya pengembangan sistem digital terintegrasi untuk meningkatkan efektivitas pemantauan serta mendukung proses pengambilan keputusan dengan lebih efisien.
Observasi Berdasarkan hasil observasi yang dilakukan selama menjalani magang di PLN UP3 Lubuk Pakam, penulis menemukan sejumlah kendala dalam kegiatan monitoring data SUTM (Saluran Udara Tegangan Menenga.
yang hingga saat ini masih dilakukan secara manual.
Petugas di lapangan harus memeriksa data dari beberapa sistem yang terpisah, seperti peta jaringan, status beban dan arus, serta laporan gangguan yang tidak saling terhubung, sehingga proses pengambilan keputusan menjadi kurang efisien dan memakan waktu lebih lama.
Selain itu, sistem website yang digunakan saat ini memiliki beberapa keterbatasan, di antaranya Belum tersedia integrasi antara tampilan peta jaringan dengan data beban dan arus secara real-time.
Fitur ekspor laporan langsung dari sistem belum disediakan.
Tampilan antarmuka yang ada masih kurang praktis dan belum memberikan kemudahan bagi petugas dalam melakukan monitoring secara cepat dan tepat.
Berdasarkan permasalahan tersebut, diperlukan perancangan antarmuka website monitoring data SUTM yang terintegrasi, lebih efektif, dan mampu menunjang kebutuhan monitoring di PLN UP3 Lubuk Pakam.
Analisis Data Pada penelitian ini, data dianalisis dengan pendekatan deskriptif kualitatif .
dengan tujuan untuk menggambarkan apa yang dibutuhkan oleh A 2025 The Author.
Published by UNITY ACADEMY .
This is an open access article under the CC BY-SA license .
ttp://creativecommons.
org/licenses/by-sa/4.
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 4.
Nomor: 3.
September 2025: 230-247 https://jurnal.
unity-academy.
id/index.
php/jirsi/index e-ISSN 2830-3954 p-ISSN 2830-6031 pengguna, tantangan yang ada, serta merancang solusi yang berupa antarmuka website untuk memantau data SUTM yang efektif dan efisien.
Langkah-langkah dalam analisis data yang dilakukan meliputi:
Analisis Hasil Observasi : Data yang diperoleh selama observasi di waktu magang dianalisis untuk menemukan alur kerja, keperluan pengguna, serta kendala dalam proses pemantauan data yang sedang berlangsung saat ini.
Analisis Kebutuhan Pengguna : Mengidentifikasi kebutuhan setiap aktor (Admin.
Petugas, dan Pengguna Publi.
berdasarkan masalah yang telah teridentifikasi, dilanjutkan dengan merancang fitur-fitur yang relevan sesuai dengan kebutuhan pengguna.
Analisis Fungsional Sistem : Menentukan fungsi-fungsi utama yang diperlukan dalam website, seperti pemantauan data secara real-time, pengintegrasian peta jaringan, dan fitur untuk mengekspor laporan.
Analisis ini menghasilkan flowchart dan use case diagram yang menjadi panduan dalam perancangan sistem.
Analisis Hasil Perancanga : Menganalisis desain antarmuka website yang telah dibuat, untuk memastikan bahwa hasil desain tersebut memenuhi kebutuhan pengguna dan mampu mempermudah proses pemantauan data SUTM.
Evaluasi Desain : Dilakukan pengujian awal melalui simulasi untuk memastikan bahwa desain antarmuka sesuai dan mudah digunakan.
Hasil dari pengujian ini kemudian digunakan untuk memperbaiki desain sebelum tahap implementasi yang lebih lanjut.
Pembuatan Diagram Flowchart Flowchart merupakan representasi grafis yang berfungsi untuk menggambarkan secara sistematis langkah-langkah dan urutan prosedur yang harus dilaksanakan dalam suatu program atau proses Flowchart sistem digunakan untuk mengilustrasikan aliran proses dalam suatu sistem, mulai dari tahap penerimaan data .
, pemrosesan, hingga penyajian hasil .
Selain itu, flowchart sistem juga menunjukkan jenis media penyimpanan yang digunakan selama proses pengolahan data berlangsung.
Berbeda dengan itu, flowchart program adalah diagram yang tersusun dari simbol-simbol baku yang saling terhubung dan menggambarkan alur instruksi secara rinci.
Dalam flowchart program, setiap simbol mewakili langkah atau proses spesifik yang terintegrasi dan saling berkesinambungan untuk membentuk urutan logis dalam pelaksanaan sebuah program .
A 2025 The Author.
Published by UNITY ACADEMY .
This is an open access article under the CC BY-SA license .
ttp://creativecommons.
org/licenses/by-sa/4.
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 4.
Nomor: 3.
September 2025: 230-247 https://jurnal.
unity-academy.
id/index.
php/jirsi/index e-ISSN 2830-3954 p-ISSN 2830-6031 Gambar 3.
Flowchart Website Usecase Diagram Use case diagram merupakan sebuah diagram yang digunakan untuk menggambarkan manfaat atau layanan yang disediakan oleh sistem dari sudut pandang pengguna luar yang disebut sebagai aktor.
Dalam sistem e-learning yang diusulkan, terdapat tiga jenis pengguna utama yaitu Administrator.
Dosen, dan Mahasiswa.
Masing-masing aktor memiliki peran serta interaksi yang berbeda dalam sistem.
Administrator bertanggung jawab dalam mengelola data pengguna, mata kuliah, dan pengaturan sistem, sedangkan Dosen berfungsi untuk mengelola materi pembelajaran, memberikan tugas, serta melakukan penilaian.
Sementara itu.
Mahasiswa memanfaatkan sistem untuk mengakses materi, mengerjakan tugas, dan mengikuti proses pembelajaran secara daring .
Hubungan antara aktor dan sistem ini divisualisasikan melalui use case diagram agar kebutuhan pengguna dapat lebih mudah dipahami serta mempermudah pengembang dalam merancang sistem yang sesuai dengan alur kerja yang dibutuhkan.
A 2025 The Author.
Published by UNITY ACADEMY .
This is an open access article under the CC BY-SA license .
ttp://creativecommons.
org/licenses/by-sa/4.
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 4.
Nomor: 3.
September 2025: 230-247 https://jurnal.
unity-academy.
id/index.
php/jirsi/index e-ISSN 2830-3954 p-ISSN 2830-6031 Gambar 4.
Usecase Diagram Perancangan Prototype Perancangan prototype adalah langkah dalam menciptakan model awal untuk sebuah aplikasi atau produk dengan memperlihatkan ide serta fungsinya sebelum versi akhir dibuat .
Dalam penelitian ini, penulis memanfaatkan alat yang disebut figma untuk merancang prototype situs web pemantauan data.
Figma adalah platform berbasis web yang sering digunakan untuk mendesain prototype antarmuka.
Salah satu kelebihan utama figma adalah kemampuannya untuk mendukung kolaborasi secara langsung dan memungkinkan banyak pengguna untuk mengakses dan mengedit proyek desain secara bersamaan .
Evaluasi dan Uji Coba Evaluasi dan uji coba merupakan langkah penting dalam mendesain antarmuka.
Pada tahap ini dilakukan evaluasi sistem yang telah dibuat untuk mendapatkan sistem yang sesuai dengan keinginan dan kebutuhan Evaluasi sistem ini akan terus dilakukan sampai dengan sistem disetujui oleh kilen dan setiap perubahan pada sistem akan dicatat sebagai iterasi dalam Model Prototype .
HASIL DAN PEMBAHASAN
Perancangan Prototype Perancangan prototype website Monitoring Data SUTM PLN bertujuan untuk menyediakan antarmuka yang interaktif dan responsif dalam memantau kondisi jaringan Saluran Udara Tegangan Menengah (SUTM) secara real-time.
Sistem ini dirancang untuk memudahkan pengguna, terutama admin dan petugas lapangan.
A 2025 The Author.
Published by UNITY ACADEMY .
This is an open access article under the CC BY-SA license .
ttp://creativecommons.
org/licenses/by-sa/4.
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 4.
Nomor: 3.
September 2025: 230-247 https://jurnal.
unity-academy.
id/index.
php/jirsi/index e-ISSN 2830-3954 p-ISSN 2830-6031 dalam mengakses data beban, arus, tegangan, serta status infrastruktur .
iang dan kabe.
melalui visualisasi dashboard dan peta interaktif.
Struktur navigasi utama pada prototype ini menggunakan pendekatan Single Page Application (SPA) yang terdiri dari beberapa halaman atau section, yaitu:
Dashboard: Menampilkan grafik beban per zona dan status arus terkini.
Peta Jaringan: Visualisasi titik lokasi tiang dan kabel pada Google Maps beserta statusnya.
Monitoring Data: Menyediakan tabel dan grafik interaktif untuk data arus, tegangan, dan suhu kabel, dengan fitur filter berdasarkan zona dan tanggal.
Laporan: Memungkinkan admin dan petugas untuk mengelola laporan gangguan serta mengekspornya ke PDF atau Excel.
Riwayat Inspeksi: Menyediakan data historis inspeksi yang dilakukan oleh Login Modal: Form login interaktif berbasis modal .
op-u.
untuk membatasi akses data sensitif.
Selanjutnya Komponen UI yang Dirancang :
Header dan Navigasi: Tetap berada di atas halaman .
untuk memudahkan perpindahan antar menu.
Card Komponen: Digunakan untuk menampilkan ringkasan data seperti beban per zona dan status sistem.
Chart (Grafi.
: Menggunakan Chart.
js untuk visualisasi tren arus, tegangan, dan suhu kabel.
Google Maps API: Menggambarkan posisi tiang/kabel dan statusnya secara Tabel Data: Digunakan untuk menampilkan hasil monitoring sensor, laporan gangguan, dan riwayat inspeksi.
Form Filter & Export: Tersedia untuk menyaring data berdasarkan waktu/zona/jenis gangguan dan mendukung ekspor data ke Excel/PDF.
Login Modal Dialog: Merupakan dialog pop-up dengan input untuk username dan password, digunakan untuk autentikasi pengguna.
Selanjutnya Responsivitas dan Aksesibilitas.
Prototype dirancang agar responsif di berbagai ukuran layar .
esktop, tablet, mobil.
dan telah memperhatikan aksesibilitas, termasuk Navigasi keyboard .
Label ARIA untuk pembaca layar.
Kontras warna yang cukup antara teks dan latar.
Fungsi Dinamis Prototype telah disimulasikan dengan fungsi-fungsi dinamis seperti.
Pembaruan data status secara otomatis setiap 10 detik.
Interaksi pengguna terhadap filter data.
Pemunculan informasi status real-time.
Pemrosesan input login dan validasi Evaluasi Awal Perancangan prototype ini telah berhasil merepresentasikan alur kerja utama dari sistem Monitoring Data SUTM PLN.
Meskipun saat ini masih berupa prototype statis/dinamis sisi frontend, sistem ini A 2025 The Author.
Published by UNITY ACADEMY .
This is an open access article under the CC BY-SA license .
ttp://creativecommons.
org/licenses/by-sa/4.
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 4.
Nomor: 3.
September 2025: 230-247 https://jurnal.
unity-academy.
id/index.
php/jirsi/index e-ISSN 2830-3954 p-ISSN 2830-6031 siap dikembangkan lebih lanjut ke tahap integrasi dengan backend untuk implementasi real-time berbasis IoT dan database.
1 Halaman Dashboard Halaman Dashboard pada sistem Monitoring Data SUTM PLN dirancang sebagai pusat informasi utama yang menampilkan keadaan jaringan listrik secara langsung dan terbaru.
Antarmuka halaman ini menjelaskan dengan jelas dan singkat tujuan utama, yaitu untuk memantau keadaan tiang, kabel, beban, serta arus secara real-time.
Desain visual halaman ini disusun dengan rapi, profesional, dan mudah diakses oleh pengunjung, baik petugas maupun masyarakat umum.
Dari segi visual, halaman ini terbagi menjadi dua bagian utama, yaitu grafik beban berdasarkan zona dan status saat ini.
Di bagian kiri terdapat grafik interaktif yang menunjukkan perubahan beban listrik pada tiga zona berbeda dalam periode waktu yang ditentukan.
Grafik ini disajikan dalam bentuk garis dengan warna berbeda untuk setiap zona, yang memungkinkan pengguna untuk dengan cepat melihat tren beban dan membandingkan kinerja antara daerah yang berbeda.
Sementara itu, di sebelah kanan, terdapat informasi status terkini yang memuat nilai beban real-time untuk masing-masing zona dan nilai rata-rata arus sistem.
Data ini ditampilkan dalam angka besar dan kontras agar mudah dibaca dengan cepat.
Selain itu, jika ada potensi gangguan seperti lonjakan beban di suatu zona, sistem akan secara otomatis memberikan peringatan dalam bentuk notifikasi yang mencolok.
Contohnya, peringatan seperti "beban zona 3 mendekati batas maksimum" akan muncul agar petugas dapat segera mengambil langkah yang diperlukan.
Dari aspek kerja sistem, halaman antarmuka ini terhubung dengan modul monitoring yang mengambil data sensor dari lapangan, seperti arus, tegangan, suhu kabel, dan status beban.
Data ini dikirim secara berkala melalui backend dan divisualisasikan melalui grafik dan komponen UI dengan cara yang dinamis menggunakan Chart.
Pembaruan informasi dilakukan secara otomatis .
anpa perlu memuat ulang halama.
setiap beberapa detik, sehingga pengguna selalu menerima informasi terbaru tanpa jeda.
Secara keseluruhan, sistem pada halaman antarmuka ini mengintegrasikan prinsip keterbacaan, interaktivitas, dan keandalan dalam menyampaikan informasi penting terkait jaringan listrik.
Dengan adanya antarmuka ini, proses pemantauan kondisi SUTM menjadi lebih efisien dan dapat diakses dengan cepat oleh para pengguna yang berwenang maupun masyarakat yang memerlukan informasi umum.
A 2025 The Author.
Published by UNITY ACADEMY .
This is an open access article under the CC BY-SA license .
ttp://creativecommons.
org/licenses/by-sa/4.
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 4.
Nomor: 3.
September 2025: 230-247 https://jurnal.
unity-academy.
id/index.
php/jirsi/index e-ISSN 2830-3954 p-ISSN 2830-6031 Gambar 5.
Halaman Dashboard Halaman Login Halaman login pada sistem Monitoring Data SUTM PLN disediakan dalam bentuk modal dialog interaktif yang muncul ketika pengguna mengklik tombol AuLoginAy pada pojok kanan atas halaman.
Desain halaman login ini disesuaikan dengan prinsip kenyamanan pengguna dan keamanan akses, mengingat sebagian fitur dalam sistem hanya dapat diakses oleh pengguna tertentu seperti admin dan petugas lapangan.
Tampilan login dirancang sederhana namun fungsional.
Modal login ini muncul di atas latar belakang yang sedikit transparan, sehingga menonjol dan menarik perhatian pengguna tanpa meninggalkan halaman yang sedang dibuka.
Di dalamnya, terdapat dua kolom input untuk memasukkan username dan password.
Tombol "Login" berwarna biru terang ditampilkan dengan kontras tinggi agar mudah terlihat dan diakses.
Selain itu, tersedia juga ikon AuXAy di pojok kanan atas untuk menutup jendela login jika pengguna membatalkan proses Dari sisi sistem kerja, halaman login ini bersifat simulatif pada tahap prototype, artinya input yang dimasukkan oleh pengguna belum terkoneksi langsung ke server backend yang sebenarnya.
Saat pengguna mengisi username dan password lalu menekan tombol login, sistem akan menampilkan alert pemberitahuan .
yang menyatakan bahwa proses login hanya berupa tampilan prototipe dan belum mengaktifkan autentikasi nyata.
Fungsi ini dirancang untuk menggambarkan alur kerja sesungguhnya yang nantinya akan dihubungkan ke database pengguna serta sistem manajemen sesi login .
isalnya menggunakan token atau cooki.
Secara teknis, desain login ini sudah mengakomodasi kebutuhan akses yang terbatas.
Dalam pengembangan selanjutnya, sistem login akan dikembangkan menjadi autentikasi penuh dengan validasi pengguna berbasis peran .
ole-based access contro.
, di mana hanya admin dan petugas yang dapat mengakses fitur seperti A 2025 The Author.
Published by UNITY ACADEMY .
This is an open access article under the CC BY-SA license .
ttp://creativecommons.
org/licenses/by-sa/4.
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 4.
Nomor: 3.
September 2025: 230-247 https://jurnal.
unity-academy.
id/index.
php/jirsi/index e-ISSN 2830-3954 p-ISSN 2830-6031 input data sensor, laporan gangguan, dan manajemen riwayat inspeksi, sementara pengguna umum hanya dapat melihat data yang bersifat publik.
Gambar 6.
Halaman Login Halaman Peta Jaringan Halaman Peta Jaringan adalah salah satu fitur penting dalam sistem Pemantauan Data SUTM PLN yang berfungsi untuk menampilkan posisi fisik dari jaringan listrik, termasuk titik-titik tiang dan kabel pada peta interaktif.
Halaman ini dirancang untuk memberikan gambaran visual yang jelas tentang keadaan di lapangan, sehingga memudahkan petugas dalam memantau dan mengidentifikasi lokasi gangguan secara geografis.
Ketika pengguna mengakses halaman ini, mereka akan disambut dengan peta yang menggunakan Google Maps yang menunjukkan area operasi .
alam contoh prototipe ini berfokus pada wilayah Bandun.
Di peta tersebut, ada berbagai penanda lokasi yang menunjukkan tempat tiang listrik.
Setiap penanda memiliki warna yang berbeda sesuai dengan statusnya, yaitu biru untuk kondisi normal, kuning untuk peringatan, dan merah untuk kerusakan.
Dengan pengkodean warna yang digunakan, pengguna dapat dengan cepat memahami kondisi setiap titik pada jaringan.
Fungsi dari halaman ini memanfaatkan API Google Maps untuk menampilkan peta yang diperbarui secara real-time.
Data mengenai titik koordinat dan status jaringan diinput menggunakan data JSON atau array objek dalam skrip JavaScript.
Ketika pengguna mengklik salah satu penanda, akan muncul jendela informasi .
nfo windo.
yang memberikan keterangan mengenai nama titik dan status terkini, seperti AuTiang Zona 1 Ae RusakAy atau AuTiang Zona 3 Ae Beban TinggiAy.
Halaman ini juga memungkinkan pembaharuan posisi dan status penanda secara dinamis, sehingga di masa mendatang, sistem ini dapat terhubung dengan perangkat IoT atau sensor di lapangan untuk mengubah tampilan peta secara langsung ketika terjadi perubahan kondisi.
Dari segi desain.
A 2025 The Author.
Published by UNITY ACADEMY .
This is an open access article under the CC BY-SA license .
ttp://creativecommons.
org/licenses/by-sa/4.
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 4.
Nomor: 3.
September 2025: 230-247 https://jurnal.
unity-academy.
id/index.
php/jirsi/index e-ISSN 2830-3954 p-ISSN 2830-6031 tampilan halaman peta dirancang responsif agar sesuai dengan ukuran layar Desain peta memiliki sudut melengkung dan bayangan lembut, sejalan dengan estetika sistem secara keseluruhan.
Penempatan peta juga dilakukan secara sentral agar menjadi fokus utama saat halaman diakses.
Dengan adanya halaman Peta Jaringan ini, sistem Pemantauan Data SUTM PLN tidak hanya menyajikan data angka, tetapi juga memberikan visualisasi spasial yang sangat mendukung proses pengambilan keputusan operasional, khususnya untuk inspeksi lapangan dan penanganan gangguan.
Gambar 7.
Halaman Peta Jaringan Halaman Monitoring Data Halaman Monitoring Data dibuat untuk menampilkan data teknis dari pembacaan sensor jaringan listrik, termasuk arus .
, tegangan .
, dan suhu kabel (AC) dengan lebih terperinci dan fleksibel.
Tujuan dari halaman ini adalah untuk memberikan gambaran tentang kinerja sistem dalam bentuk tabel dan grafik yang dapat disaring berdasarkan waktu dan wilayah tertentu, sehingga sangat mendukung petugas teknis dalam menganalisa kondisi jaringan dari waktu ke Tampilan halaman ini terdiri dari dua bagian utama: penyaring data dan visualisasi data.
Di bagian atas, terdapat elemen input berupa kolom tanggal dan dropdown untuk zona, yang memungkinkan pengguna menyaring data sesuai Setelah penyaringan dilakukan, tabel dan grafik akan otomatis menyesuaikan untuk menampilkan hanya data yang relevan.
Di bawah bagian penyaring, terdapat tabel pemantauan data yang menunjukkan informasi harian untuk setiap zona.
Kolom dalam tabel meliputi tanggal pencatatan, zona, arus, tegangan, dan suhu kabel.
Setiap baris mewakili satu data yang diperoleh dari Tabel ini dirancang agar mudah dibaca dan mendukung interaksi seperti hover dan highlight untuk memudahkan penandaan data.
Selain tabel, juga terdapat grafik interaktif yang menggambarkan tren arus, tegangan, dan suhu dalam bentuk A 2025 The Author.
Published by UNITY ACADEMY .
This is an open access article under the CC BY-SA license .
ttp://creativecommons.
org/licenses/by-sa/4.
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 4.
Nomor: 3.
September 2025: 230-247 https://jurnal.
unity-academy.
id/index.
php/jirsi/index e-ISSN 2830-3954 p-ISSN 2830-6031 Grafik ini menggunakan Chart.
js dan mengubah data sesuai dengan hasil Setiap parameter memiliki sumbu Y yang terpisah untuk menjauhi masalah skala, sementara sumbu X menunjukkan waktu atau gabungan tanggal dan Halaman ini juga memiliki fitur ekspor data ke format Excel (.
, sehingga pengguna bisa menyimpan dan memproses data lebih lanjut di luar sistem.
Tombol "Ekspor Excel" yang tersedia akan mengunduh data yang terlihat di tabel secara Secara keseluruhan, halaman Pemantauan Data mengambil informasi dari array yang mewakili hasil pembacaan sensor.
Data ini dapat disaring di sisi klien dan akan diperbarui pada tabel serta grafik sesuai dengan filter yang diterapkan.
Dalam versi prototipe ini, data yang ditampilkan bersifat statis atau simulasi, tetapi telah disiapkan untuk terhubung ke sistem backend dan database yang nyata pada tahap pengembangan selanjutnya.
Dengan hadirnya halaman ini, sistem Pemantauan Data SUTM PLN dapat memenuhi kebutuhan analisis teknis dengan lebih mendalam dan detail.
Fitur ini memperkuat aspek diagnostik dan pengawasan operasional, sehingga membantu dalam pengambilan keputusan teknis dan pemeliharaan jaringan listrik.
Gambar 7.
Halaman Monitoring Data Halaman Laporan Gangguan dan Inspeksi Halaman Laporan Gangguan dan Inspeksi berfungsi sebagai titik pusat catatan seluruh peristiwa luar biasa yang terjadi pada jaringan SUTM PLN, mencakup kerusakan fisik hingga beban berlebih, sekaligus mencatat tindakan inspeksi lapangan.
Ketika pengguna mengakses halaman ini, sistem langsung menampilkan judul yang jelas AuLaporan Gangguan dan InspeksiAy beserta penjelasan singkat mengenai tujuan utama halaman: menyaring, meninjau, dan mengekspor Di bagian atas, antarmuka menyuguhkan dua elemen penyaringAipemilih tanggal dan dropdown jenis gangguanAidiikuti dengan tombol Filter.
Setelah pengguna menentukan kriteria, skrip JavaScript di sisi klien menyaring data array A 2025 The Author.
Published by UNITY ACADEMY .
This is an open access article under the CC BY-SA license .
ttp://creativecommons.
org/licenses/by-sa/4.
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 4.
Nomor: 3.
September 2025: 230-247 https://jurnal.
unity-academy.
id/index.
php/jirsi/index e-ISSN 2830-3954 p-ISSN 2830-6031 laporan dan memperbarui tabel untuk menampilkan hanya entri yang berkaitan.
Metode ini memungkinkan analisis dilakukan dengan cepat tanpa harus memuat ulang halaman.
Tabel laporan terletak tepat di bawah penyaring dan terdiri dari lima kolom:
tanggal kejadian, jenis gangguan, deskripsi, zona, dan status penanganan.
Setiap baris mewakili satu insiden atau hasil dari inspeksi.
Warna latar belakang baris akan berubah secara lembut saat kursor diarahkan, memudahkan dalam melakukan penelusuran visual.
Karena struktur tabel cukup responsif, tata letak tetap terjaga baik pada layar desktop maupun perangkat mobile.
Untuk keperluan pelaporan lebih lanjut, halaman ini menyediakan dua tombol ekspor: Export PDF dan Export Excel.
Di versi prototipe, ekspor PDF masih berupa simulasi pop-up, sedangkan ekspor Excel sudah berfungsiAitabel yang ditampilkan akan diunduh sebagai berkas CSV, siap untuk diolah menggunakan aplikasi spreadsheet.
Fitur ekspor ini mempercepat proses pembuatan laporan resmi dan mengurangi kemungkinan kesalahan transkripsi data.
Pada tahap prototipe, data laporan dimasukkan secara Namun, alur kerja telah dirancang untuk terhubung dengan backend.
Dalam implementasi penuh di masa mendatang, entri laporan akan diambil dari basis data yang diisi oleh petugas lapangan melalui aplikasi seluler atau dashboard internal.
Setiap pembaruan statusAimisalnya perubahan dari AuDalam PerbaikanAy menjadi AuSelesaiAyAiakan langsung ditampilkan di halaman ini, memastikan semua pemangku kepentingan mendapatkan informasi terkini.
Dengan cara ini, halaman Laporan Gangguan dan Inspeksi mengintegrasikan kemudahan navigasi, fleksibilitas penyaringan, dan kemampuan ekspor data untuk mendukung proses audit dan pengambilan keputusan.
Fitur ini melengkapi ekosistem Monitoring Data SUTM PLN sebagai solusi yang terintegrasi, tidak hanya memonitor kondisi jaringan secara real-time, tetapi juga mendokumentasikan setiap tindak lanjut teknis dengan rapi dan tersusun.
Gambar 8.
Halaman Laporan Gangguan dan Inspeksi A 2025 The Author.
Published by UNITY ACADEMY .
This is an open access article under the CC BY-SA license .
ttp://creativecommons.
org/licenses/by-sa/4.
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 4.
Nomor: 3.
September 2025: 230-247 https://jurnal.
unity-academy.
id/index.
php/jirsi/index e-ISSN 2830-3954 p-ISSN 2830-6031 Halaman Riwayat Inspeksi Halaman Riwayat Inspeksi berfungsi sebagai pusat pengumpulan data hasil pemeriksaan rutin mengenai keadaan fisik jaringan SUTM (Saluran Udara Tegangan Menenga.
Tujuan utama dari halaman ini ialah untuk menunjukkan catatan historis mengenai aktivitas inspeksi yang dilakukan oleh petugas di lapangan, termasuk evaluasi kondisi tiang dan kabel serta informasi penting lainnya.
Halaman ini sangat penting sebagai dukungan bagi fungsi pengawasan dan pengambilan keputusan dalam jangka panjang terkait pemeliharaan infrastruktur listrik.
Dari segi tampilan, halaman Riwayat Inspeksi dirancang dengan sederhana, berfokus pada kejelasan data, menggunakan tabel sebagai media utamanya.
Judul halaman ditampilkan secara jelas di bagian atas, diikuti oleh deskripsi singkat yang menjelaskan kepada pengguna bahwa informasi yang ditampilkan adalah bersifat historis dan tidak dapat diubah.
Tabel yang ada di halaman ini memuat beberapa kolom penting, yaitu :Tanggal Inspeksi menunjukkan kapan pemeriksaan dilakukan.
Zona area dari jaringan yang diperiksa,Kondisi Tiang hasil pengamatan terhadap tiang SUTM.
Kondisi Kabel mencantumkan suhu, tegangan, atau potensi kerusakan kabel.
Catatan berisi informasi tambahan atau rekomendasi dari petugas.
Setiap baris dalam tabel mencerminkan satu sesi inspeksi dan ditampilkan dengan gaya visual yang konsisten, mudah dibaca, dan responsif.
Ketika pengguna mengarahkan kursor pada baris tertentu, latar belakangnya akan berubah secara halus untuk memberikan kenyamanan saat berinteraksi.
Meskipun pada tahap awal desain ini data masih bersifat statis, susunan antarmuka telah dirancang untuk mampu menampilkan data dari basis data yang sebenarnya.
Dari segi operasional, halaman ini hanya menunjukkan data .
ead-onl.
dan tidak memberikan fitur input atau filter, mengingat sifatnya sebagai arsip.
Meski demikian, pada versi yang lebih lanjut, fitur pencarian atau filter berdasarkan tanggal dan zona mungkin akan ditambahkan untuk menyempurnakan fungsionalitas.
Secara keseluruhan, halaman Riwayat Inspeksi memperkuat aspek pelacakan dan pendokumentasian aktivitas di Data yang ada di halaman ini dapat dimanfaatkan oleh manajemen untuk melakukan evaluasi berkala, perencanaan inspeksi ulang, atau pengambilan keputusan terkait prioritas perbaikan.
Halaman ini juga dapat menjadi dasar dalam menyusun laporan kinerja teknis unit lapangan PLN secara berkala.
A 2025 The Author.
Published by UNITY ACADEMY .
This is an open access article under the CC BY-SA license .
ttp://creativecommons.
org/licenses/by-sa/4.
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 4.
Nomor: 3.
September 2025: 230-247 https://jurnal.
unity-academy.
id/index.
php/jirsi/index e-ISSN 2830-3954 p-ISSN 2830-6031 Gambar 9.
Halaman Riwayat Inspeksi Evaluasi dan Uji Coba Uji coba dilaksanakan berdasarkan kebutuhan pengguna yang telah dianalisis sebelumnya dengan pendekatan Design Thinking.
Unit Testing Dashboard
Berhasil Tidak ui
Login
Peta Jaringan ui
Monitoring Data
Laporan Gangguan & Inspeksi
Riwayat
Inspeksi
Navigasi Menu
SPA
ui Keterangan Semua Informasi beban dan arus tampil jelas Tampilan login muncul dan berjalan Titik lokasi dan marker dapat di Fitur dan grafik berjalan dengan baik ui Fitur Ekspor dan Tabel laporan ui Tabel Histori tampil lengkap ui Navigasi antar Halaman berjalan KESIMPULAN Penelitian ini berhasil menghasilkan prototype antarmuka website untuk pemantauan data SUTM PLN menggunakan pendekatan Design Thinking.
Tujuan penelitian yang dijelaskan pada pendahuluan, yaitu menghadirkan sarana pemantauan yang interaktif, mudah digunakan, dan informatif, telah tercapai.
Prototype yang dihasilkan mampu menyajikan informasi kondisi jaringan listrik A 2025 The Author.
Published by UNITY ACADEMY .
This is an open access article under the CC BY-SA license .
ttp://creativecommons.
org/licenses/by-sa/4.
Jurnal Ilmu Komputer dan Sistem Informasi (JIRSI) Volume: 4.
Nomor: 3.
September 2025: 230-247 https://jurnal.
unity-academy.
id/index.
php/jirsi/index e-ISSN 2830-3954 p-ISSN 2830-6031 secara visual melalui dashboard, grafik, tabel, serta peta jaringan.
Hal ini menunjukkan adanya kesesuaian antara masalah yang diidentifikasi di awal penelitian dengan solusi yang ditawarkan.
Ke depan, prototype ini dapat dikembangkan lebih lanjut melalui integrasi dengan sistem backend berbasis IoT dan database real-time, serta penambahan fitur kecerdasan buatan untuk analisis prediktif.
Selain itu, perluasan ruang lingkup pemantauan ke unit PLN lainnya dan peningkatan keamanan sistem juga dapat menjadi fokus penelitian berikutnya.
DAFTAR PUSTAKA