ESP32 Webserver DHT11 Temperature and Humidity Measurement
Tujuan:
Peserta dapat membangun sistem webserver menggunakan ESP32 yang menampilkan data suhu dan kelembaban dari sensor DHT11 secara real-time melalui halaman web.
Alat dan Bahan:
Ads Jadwal Training bisaioti Offline
| No | Materi | Tanggal | Waktu | Harga | Lokasi | View | Action |
|---|---|---|---|---|---|---|---|
| 1 | IOT PLC SCADA Siemens | 7-8 Juni 2025 | 08.00 - 16.00 | 2000000 | Surabaya | Silabus | Daftar Sekarang |
| 2 | IOT PLC SCADA Omron | 14 - 15 Juni 2025 | 08.00 - 16.00 | 2000000 | Surabaya | Silabus | Daftar Sekarang |
| 3 | IOT PLC SCADA Schneider | 21-22 Juni 2025 | 08.00 -16.00 | 2000000 | Surabaya | Silabus | Daftar Sekarang |
| 4 | IOT PLC SCADA Allen Bradley | 28-29 Juni 2025 | 08.00-16.00 | 2000000 | Surabaya | Silabus | Daftar Sekarang |
- ESP32 Development Board
- Sensor DHT11
- Breadboard
- Kabel jumper
- Resistor 10kΩ (opsional untuk pull-up pada pin data DHT11)
- USB Cable (untuk menghubungkan ESP32 ke PC)
Perangkat Lunak:
- Arduino IDE (dengan dukungan ESP32)
- Library yang diperlukan:
- DHT sensor library by Adafruit
- ESPAsyncWebServer dan AsyncTCP (untuk web server)
Langkah-Langkah:
- Persiapan Hardware
- Rangkai komponen seperti gambar di bawah ini:
| DHT11 Pin | ESP32 Pin |
| VCC | 3.3V |
| GND | GND |
| DATA | GPIO 2 |
- Jika menggunakan resistor pull-up, hubungkan resistor 10kΩ antara VCC dan pin data sensor DHT11.
- Instalasi Library yang Diperlukan
- Buka Arduino IDE.
- Pastikan Anda sudah menginstal ESP32 board di Arduino IDE. Jika belum:
- Buka File > Preferences, lalu tambahkan URL ini di bagian Additional Board Manager URLs:
https://dl.espressif.com/dl/package_esp32_index.json
-
- Pergi ke Tools > Board > Board Manager, cari “ESP32”, dan instal.
- Instal DHT Sensor Library:
- Pergi ke Sketch > Include Library > Manage Libraries.
- Cari “DHT sensor library by Adafruit” dan instal.
- Instal library untuk webserver:
- ESPAsyncWebServer dan AsyncTCP:
- Buka Sketch > Include Library > Manage Libraries.
- Cari ESPAsyncWebServer dan AsyncTCP. Instal kedua library tersebut.
- ESPAsyncWebServer dan AsyncTCP:
- Kode Program
Berikut adalah kode program untuk ESP32 Webserver menggunakan sensor DHT11:
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <Adafruit_Sensor.h>
#include <DHT.h>
// Definisikan pin DHT dan tipe sensor
#define DHTPIN 4Â Â Â Â Â
#define DHTTYPE DHT11
DHT dht(DHTPIN, DHTTYPE);
// Konfigurasi Wi-Fi
const char* ssid = "Nama_WiFi";Â Â Â Â Â Â Â // Ganti dengan nama WiFi Anda
const char* password = "Password_WiFi";Â // Ganti dengan password WiFi Anda
AsyncWebServer server(80);
String readDHTTemperature() {
 float t = dht.readTemperature();
if (isnan(t)) {
  return "--";
} else {
  return String(t);
}
}
String readDHTHumidity() {
float h = dht.readHumidity();
if (isnan(h)) {
  return "--";
} else {
  return String(h);
}
}
void setup() {
 // Memulai serial monitor
Serial.begin(115200);
dht.begin();
 // Hubungkan ke Wi-Fi
 WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
Serial.println(WiFi.localIP());
 // Rute untuk menampilkan halaman web
 server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  String html = "<!DOCTYPE html><html>";
  html += "<head><meta name='viewport' content='width=device-width, initial-scale=1.0'>";
  html += "<title>ESP32 DHT11 WebServer</title></head>";
  html += "<body><h1>ESP32 DHT11 Sensor Data</h1>";
  html += "<p>Temperature: " + readDHTTemperature() + " °C</p>";
  html += "<p>Humidity: " + readDHTHumidity() + " %</p>";
  html += "</body></html>";
  request->send(200, "text/html", html);
});
// Memulai server
server.begin();
}
void loop() {
 // Tidak ada kode dalam loop
}
- Ubah SSID dan Password Wi-Fi
Di bagian berikut, ganti nama Wi-Fi dan password sesuai dengan jaringan Wi-Fi yang Anda gunakan:
const char* ssid = "Nama_WiFi";Â Â Â Â Â Â Â const char* password = "Password_WiFi";
- Unggah Program ke ESP32
- Sambungkan ESP32 ke komputer menggunakan kabel USB.
- Pilih Tools > Board > ESP32 Dev Module.
- Pilih port yang sesuai di Tools > Port.
- Klik tombol Upload di Arduino IDE untuk mengunggah program ke ESP32.
- Uji Webserver
- Setelah proses upload selesai, buka Serial Monitor di Arduino IDE dengan baudrate 115200 untuk melihat alamat IP ESP32.
- Catat alamat IP tersebut (contoh: 192.168.1.10).
- Buka browser web di perangkat yang terhubung ke jaringan Wi-Fi yang sama, dan masukkan alamat IP yang ditampilkan di Serial Monitor.
- Halaman web akan menampilkan suhu dan kelembaban dari sensor DHT11 secara real-time.
Tugas Akhir:
- Tambahkan fitur untuk memperbarui data suhu dan kelembaban secara otomatis tanpa perlu me-refresh halaman secara manual.
- Buat laporan hasil implementasi, termasuk screenshot tampilan webserver yang berjalan.
