Pendahuluan
Di artikel sebelumnya kita sudah belajar menghubungkan ESP32 ke WiFi (#4) dan membaca data sensor DHT22 (#5). 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 (#4) dan Membaca Sensor DHT22 (#5). Kode di bawah menggabungkan kedua konsep tersebut.
Wiring Hardware
Koneksi DHT22 ke ESP32 (sama seperti tutorial DHT22 (#5)):
- 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:
- DHT sensor library — oleh Adafruit
- 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 placeholder GANTI_SSID_WIFI / GANTI_PASSWORD_WIFI. Untuk produksi tanpa hardcode, lihat NVS + WiFiManager (#12).
#include <WiFi.h>
#include <WebServer.h>
#include <DHT.h>
// ── Konfigurasi WiFi ──────────────────────────────────
const char* ssid = "GANTI_SSID_WIFI";
const char* password = "GANTI_PASSWORD_WIFI";
// ── 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
- Pilih board ESP32 Dev Module dan port COM yang benar
- Klik Upload dan tunggu hingga selesai
- Buka Serial Monitor (115200 baud)
- Catat alamat IP yang muncul, contoh:
192.168.1.100 - 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/dataResponse 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 (#21) di fase berikutnya.
Cara Kerja Web Server ESP32
Berikut alur singkat yang terjadi di balik layar:
- ESP32 terhubung ke WiFi dan mendapat alamat IP lokal (misalnya 192.168.1.100)
WebServermendengarkan request HTTP di port 80- Saat browser membuka
/, ESP32 mengirim halaman HTML dashboard (data dari pembacaan berkala) - Saat ada request ke
/api/data, ESP32 mengirim data sensor dalam format JSON - 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 WiFi + HTTP (#4))
- Pelajari protokol MQTT (#7) untuk komunikasi IoT yang lebih efisien
- Pahami kapan pakai REST vs MQTT di panduan #20 sebelum scale ke cloud
- Tambahkan relay (#8) untuk kontrol lampu berdasarkan suhu
- Integrasikan dengan Home Assistant (#21) untuk smart home lengkap
- Upgrade dashboard hybrid: Web Server + MQTT (#10)
- Tambahkan visual: ESP32-CAM MJPEG streaming (#27) — live video di browser, melengkapi angka sensor di web server ini
- Akses aman dari luar LAN → pelajari HTTPS di ESP32 (#38)
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 — atau naik level ke HTTPS (#38) / MQTT TLS (#17).