Pendahuluan

Di artikel sebelumnya kita sudah belajar menghubungkan ESP32 ke WiFi dan membaca data sensor DHT22. Kali ini kita akan menggabungkan keduanya menjadi satu proyek lengkap: Web Server di ESP32 yang menampilkan suhu dan kelembaban langsung di browser HP atau laptop kamu — tanpa server eksternal!

Ini adalah langkah penting menuju smart home dan IoT dashboard. Kamu tidak perlu hosting cloud untuk monitoring sederhana; ESP32 sendiri bisa menjadi server mini.

Yang Kamu Butuhkan

  • Board ESP32 DevKit (sudah terpasang di breadboard dari tutorial sebelumnya)

  • Sensor DHT22 + resistor pull-up 10kΩ

  • Kabel jumper

  • Laptop/PC dengan Arduino IDE

  • HP atau laptop yang terhubung ke WiFi yang sama dengan ESP32

Prasyarat: Pastikan kamu sudah membaca artikel Menghubungkan ESP32 ke WiFi dan Membaca Sensor DHT22. Kode di bawah menggabungkan kedua konsep tersebut.

Wiring Hardware

Koneksi DHT22 ke ESP32 (sama seperti tutorial DHT22):

  • VCC → 3.3V ESP32

  • DATA → GPIO 4 (+ resistor 10kΩ ke VCC)

  • GND → GND ESP32

Install Library yang Diperlukan

Pastikan library berikut sudah terinstall di Arduino IDE:

  1. DHT sensor library — oleh Adafruit

  2. Adafruit Unified Sensor — dependency DHT library

Library WiFi dan WebServer sudah built-in di ESP32 board package, tidak perlu install tambahan.

Kode Program: Web Server + DHT22

Buka Arduino IDE, buat sketch baru, lalu salin kode berikut. Ganti ssid dan password dengan kredensial WiFi kamu:

#include <WiFi.h>
#include <WebServer.h>
#include <DHT.h>

// ── Konfigurasi WiFi ──────────────────────────────────
const char* ssid     = "NamaWiFiKamu";
const char* password = "PasswordWiFiKamu";

// ── Konfigurasi DHT22 ───────────────────────────────────
#define DHT_PIN  4
#define DHT_TYPE DHT22
DHT dht(DHT_PIN, DHT_TYPE);

// ── Web Server di port 80 ───────────────────────────────
WebServer server(80);

// Variabel global untuk data sensor
float suhuTerakhir      = 0;
float kelembabanTerakhir = 0;
unsigned long waktuBacaTerakhir = 0;
const unsigned long intervalBaca = 2000; // baca setiap 2 detik

// ── Halaman utama (HTML) ────────────────────────────────
String halamanDashboard() {
  String html = "<!DOCTYPE html><html lang='id'>";
  html += "<head><meta charset='UTF-8'>";
  html += "<meta name='viewport' content='width=device-width, initial-scale=1'>";
  html += "<title>ESP32 Sensor Monitor</title>";
  html += "<style>";
  html += "body{font-family:system-ui,sans-serif;max-width:480px;margin:40px auto;padding:20px;background:#f0f4f8;}";
  html += "h1{color:#2979FF;font-size:1.5rem;}";
  html += ".card{background:#fff;border:3px solid #000;box-shadow:4px 4px 0 #000;padding:24px;margin:16px 0;}";
  html += ".nilai{font-size:2.5rem;font-weight:800;color:#2D3748;}";
  html += ".label{color:#666;font-size:0.9rem;text-transform:uppercase;letter-spacing:1px;}";
  html += ".footer{text-align:center;color:#999;font-size:0.8rem;margin-top:24px;}";
  html += "</style></head><body>";
  html += "<h1>🌡️ ESP32 Sensor Monitor</h1>";
  html += "<div class='card'><div class='label'>Suhu</div>";
  html += "<div class='nilai'>" + String(suhuTerakhir, 1) + " °C</div></div>";
  html += "<div class='card'><div class='label'>Kelembaban</div>";
  html += "<div class='nilai'>" + String(kelembabanTerakhir, 1) + " %</div></div>";
  html += "<div class='footer'>Koding Indonesia · ESP32 IoT</div>";
  html += "</body></html>";
  return html;
}

// ── API JSON untuk data sensor ──────────────────────────
void handleAPI() {
  String json = "{";
  json += "\"suhu\":" + String(suhuTerakhir, 2) + ",";
  json += "\"kelembaban\":" + String(kelembabanTerakhir, 2) + ",";
  json += "\"device\":\"ESP32-001\"";
  json += "}";
  server.send(200, "application/json", json);
}

// ── Baca sensor DHT22 ───────────────────────────────────
void bacaSensor() {
  if (millis() - waktuBacaTerakhir < intervalBaca) return;
  waktuBacaTerakhir = millis();

  float h = dht.readHumidity();
  float t = dht.readTemperature();

  if (!isnan(h) && !isnan(t)) {
    kelembabanTerakhir = h;
    suhuTerakhir       = t;
  }
}

void setup() {
  Serial.begin(115200);
  dht.begin();

  // Koneksi WiFi
  Serial.print("Menghubungkan ke WiFi");
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nWiFi terhubung!");
  Serial.print("Buka browser: http://");
  Serial.println(WiFi.localIP());

  // Daftarkan route web server
  server.on("/",       []() { server.send(200, "text/html", halamanDashboard()); });
  server.on("/api/data", handleAPI);
  server.onNotFound([]() { server.send(404, "text/plain", "Halaman tidak ditemukan"); });

  server.begin();
  Serial.println("Web Server aktif di port 80");
}

void loop() {
  server.handleClient(); // tangani request HTTP
  bacaSensor();          // baca DHT22 secara berkala
}

Upload dan Uji Coba

  1. Pilih board ESP32 Dev Module dan port COM yang benar

  2. Klik Upload dan tunggu hingga selesai

  3. Buka Serial Monitor (115200 baud)

  4. Catat alamat IP yang muncul, contoh: 192.168.1.100

  5. Buka browser di HP/laptop (WiFi yang sama), ketik: http://192.168.1.100

Kamu akan melihat halaman dashboard dengan nilai suhu dan kelembaban real-time!

Endpoint API JSON

Selain halaman HTML, ESP32 juga menyediakan endpoint API untuk integrasi dengan aplikasi lain:

GET http://192.168.1.100/api/data

Response JSON:

{
  "suhu": 28.50,
  "kelembaban": 65.30,
  "device": "ESP32-001"
}

Endpoint ini bisa dipakai untuk membangun dashboard custom, mengirim data ke server cloud, atau diintegrasikan dengan Home Assistant di fase berikutnya.

Cara Kerja Web Server ESP32

Berikut alur singkat yang terjadi di balik layar:

  1. ESP32 terhubung ke WiFi dan mendapat alamat IP lokal (misalnya 192.168.1.100)

  2. WebServer mendengarkan request HTTP di port 80

  3. Saat browser membuka /, ESP32 membaca DHT22 lalu mengirim halaman HTML

  4. Saat ada request ke /api/data, ESP32 mengirim data sensor dalam format JSON

  5. Di loop(), server.handleClient() memproses request secara non-blocking

Tips & Troubleshooting

  • Halaman tidak bisa dibuka: Pastikan HP/laptop dan ESP32 di jaringan WiFi yang sama. Cek IP di Serial Monitor.

  • Nilai suhu NaN: Periksa wiring DHT22 dan resistor pull-up 10kΩ.

  • ESP32 restart terus: WiFi password salah atau sinyal terlalu lemah. Dekatkan ke router.

  • Data tidak update: Refresh browser. DHT22 butuh minimal 2 detik antar pembacaan.

  • Akses dari internet: Butuh port forwarding di router atau tunneling (ngrok, Cloudflare Tunnel) — topik lanjutan.

Langkah Selanjutnya

Proyek ini adalah fondasi untuk proyek IoT yang lebih kompleks. Beberapa ide pengembangan:

  • Tambahkan auto-refresh di halaman HTML dengan JavaScript setInterval

  • Kirim data ke server cloud secara berkala (kombinasi dengan artikel HTTP POST)

  • Pelajari protokol MQTT untuk komunikasi IoT yang lebih efisien

  • Tambahkan relay untuk kontrol lampu berdasarkan suhu

  • Integrasikan dengan Home Assistant untuk smart home lengkap

Keamanan: Web server ini hanya bisa diakses di jaringan lokal. Jangan expose langsung ke internet tanpa autentikasi. Untuk akses remote, gunakan VPN atau tunneling yang aman.