Bikin Website Monitoring IoT Realtime dengan PHP + MySQL + Chart.js

Admin • 21 Oct 2025

Kalau kamu pernah pengin memantau suhu, kelembaban, atau data sensor lainnya secara real-time lewat web, kamu bakal suka project ini.
Dengan PHP, MySQL, dan Chart.js, kita bisa bikin dashboard monitoring IoT sederhana tapi powerful — tanpa MQTT, tanpa Firebase, cukup pakai server kamu sendiri.

1. Arsitektur Sederhana

Alurnya kayak gini:

Jadi data dari alat langsung tampil di grafik web tanpa perlu refresh.

2. Database

Buat database iot_monitoring dan tabel sensor_data:

3. Kirim Data dari ESP32

Contoh kode sederhana di sisi perangkat:

#include <WiFi.h>
#include <HTTPClient.h>
#include "DHT.h"

#define DHTPIN 4
#define DHTTYPE DHT22

const char* ssid = "NAMA_WIFI";
const char* password = "PASSWORD_WIFI";
String server = "http://192.168.1.10/iot/post-data.php";

DHT dht(DHTPIN, DHTTYPE);

void setup() {
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  dht.begin();
  while (WiFi.status() != WL_CONNECTED) delay(500);
}

void loop() {
  float suhu = dht.readTemperature();
  float kelembaban = dht.readHumidity();

  if (!isnan(suhu) && !isnan(kelembaban)) {
    HTTPClient http;
    String url = server + "?suhu=" + suhu + "&kelembaban=" + kelembaban;
    http.begin(url);
    http.GET();
    http.end();
  }
  delay(5000);
}

4. Website Dashboard

Buat index.php untuk menampilkan grafik real-time:

<h2>📈 Monitoring Suhu & Kelembaban</h2>
<canvas id="chart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  const ctx = document.getElementById('chart').getContext('2d');
  const chart = new Chart(ctx, {
    type: 'line',
    data: { labels: [], datasets: [
      { label: 'Suhu', borderColor: 'red', data: [] },
      { label: 'Kelembaban', borderColor: 'blue', data: [] }
    ]}
  });

  async function updateChart() {
    const res = await fetch('get-data.php');
    const data = await res.json();
    chart.data.labels = data.map(d => d.created_at);
    chart.data.datasets[0].data = data.map(d => d.suhu);
    chart.data.datasets[1].data = data.map(d => d.kelembaban);
    chart.update();
  }
  setInterval(updateChart, 3000);
  updateChart();
</script>

5. Backend PHP

File post-data.php untuk menerima data:

Dan get-data.php untuk kirim data ke web:

Hasil Akhir

Sensor mengirim data ke server setiap beberapa detik
Website menampilkan grafik suhu dan kelembaban secara real-time
Tidak perlu refresh halaman
Desain bersih dan ringan

Project ini cuma dasar. Kamu bisa kembangkan:

Tambah notifikasi WhatsApp saat suhu melebihi batas
Tambah login & role user
Gunakan WebSocket biar data lebih cepat update

Kalau kamu mau belajar lebih dalam atau bikin project serupa (IoT, web monitoring, integrasi sensor, atau dashboard real-time)
Hubungi admin untuk bimbingan atau kerjasama project.

Bagikan artikel ini:

← Kembali ke Blog