الصفحة الرئيسية
CMD

Apa Itu Dashboard Monitoring dengan Grafik?

Tutorial membuat dashboard monitoring CCTV dengan grafik Chart.js dan database, menampilkan data realtime untuk IT Support dan jaringan.
Calon IT

Membuat Dashboard Monitoring CCTV dan Jaringan dengan Grafik Chart.js dan Database (Realtime IT Support System)

Tutorial membuat dashboard monitoring CCTV dengan grafik Chart.js dan database, menampilkan data realtime untuk IT Support dan jaringan.

Apa Itu Dashboard Monitoring dengan Grafik?

Dashboard monitoring dengan grafik adalah sistem visual yang menampilkan data status perangkat (CCTV, server, jaringan) dalam bentuk chart atau grafik.

Dengan grafik, IT Support bisa:

  • Melihat trend downtime

  • Analisis performa jaringan

  • Monitoring real-time lebih mudah

Arsitektur Sistem

Sistem terdiri dari:

  • PowerShell → Mengambil data monitoring

  • Database (MySQL / MariaDB) → Menyimpan data

  • Web (HTML + Chart.js) → Menampilkan grafik

Step 1: Script PowerShell Kirim Data ke Database

Script ini menyimpan status device ke database:

$ip = "192.168.1.10"
$status = if (Test-Connection $ip -Count 1 -Quiet) {1} else {0}

$connection = "server=localhost;database=monitoring;uid=root;pwd=;"
$query = "INSERT INTO status (device, status, waktu) VALUES ('CCTV-1','$status',NOW())"

$conn = New-Object MySql.Data.MySqlClient.MySqlConnection($connection)
$conn.Open()
$cmd = New-Object MySql.Data.MySqlClient.MySqlCommand($query, $conn)
$cmd.ExecuteNonQuery()
$conn.Close()

Step 2: Struktur Database

Buat database:

CREATE DATABASE monitoring;

USE monitoring;

CREATE TABLE status (
    id INT AUTO_INCREMENT PRIMARY KEY,
    device VARCHAR(50),
    status INT,
    waktu DATETIME
);

Step 3: API Sederhana (PHP)

File data.php:

<?php
$conn = new mysqli("localhost","root","","monitoring");
$result = $conn->query("SELECT * FROM status ORDER BY waktu DESC LIMIT 20");

$data = [];
while($row = $result->fetch_assoc()){
    $data[] = $row;
}

echo json_encode($data);
?>

Step 4: Dashboard Chart.js

File index.html:

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>

<h2>Monitoring CCTV</h2>
<canvas id="chart"></canvas>

<script>
fetch('data.php')
.then(res => res.json())
.then(data => {

    let labels = data.map(d => d.waktu);
    let status = data.map(d => d.status);

    new Chart(document.getElementById("chart"), {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: 'Status CCTV',
                data: status
            }]
        }
    });

});
</script>

</body>
</html>

Hasil Dashboard

Dashboard akan menampilkan:

  • Grafik ON/OFF CCTV

  • Data waktu real-time

  • Monitoring historis

Fitur yang Bisa Dikembangkan

Kamu bisa upgrade jadi:

  • Multi device (banyak kamera)

  • Grafik per lokasi

  • Alert otomatis (Telegram/WA)

  • Login dashboard

  • Integrasi NVR

Tips Profesional

  • Gunakan server VPS untuk akses online

  • Gunakan database terpisah

  • Backup data monitoring

  • Gunakan SSL untuk keamanan

Baca Juga Artikel Lainnya

Tingkatkan skill IT dan monitoring kamu di:

👉 https://www.haikalitsupport.fun/

Kesimpulan

Dashboard monitoring dengan Chart.js dan database memberikan visualisasi yang powerful untuk IT Support. Dengan sistem ini, kamu bisa memantau CCTV dan jaringan secara real-time sekaligus melihat histori performa.

Ini adalah langkah menuju sistem monitoring profesional seperti NOC dan ATMS.

Link Tambahan

👉 https://e-tle.fun/
👉 https://www.haikalitsupport.fun/

إرسال تعليق