Belajar ESP32: Web Server

Pada artikel-artikel sebelumnya, kita sudah berhasil membuat ESP32 berkomunikasi dengan sensor, menampilkan data di OLED, dan mengirim perintah melalui Bluetooth. Semua interaksi tersebut masih memerlukan perangkat khusus — entah itu kabel, layar fisik, atau aplikasi Bluetooth yang terpasang di HP.

Kali ini kita akan naik ke level berikutnya: membuat ESP32 menjadi Web Server yang dapat diakses dari browser manapun — baik dari laptop, HP Android, maupun iPhone — tanpa aplikasi tambahan, selama perangkat tersebut terhubung ke jaringan WiFi yang sama.

Kita akan membangun sebuah sistem pengawasan dan pengendalian ruangan secara bertahap. Dimulai dari konsep dasar web server, lalu menambahkan pembacaan sensor suhu, hingga akhirnya menjadi sistem monitoring yang bisa menampilkan kondisi ruangan dan mengendalikan kipas angin dari jarak jauh.

Skenario Proyek

Bayangkan Anda memiliki sebuah ruangan — bisa gudang, server room, ruang kerja, atau kamar tidur. Di dalam ruangan tersebut dipasang sebuah ESP32 yang terhubung ke WiFi. ESP32 ini dilengkapi sensor suhu dan sebuah kipas angin (dimodelkan dengan LED dalam latihan ini, namun bisa diganti dengan relay dan kipas sungguhan).

Sebelum memasuki ruangan, Anda ingin tahu dulu kondisinya: apakah suhunya nyaman? Jika terlalu panas, Anda bisa menyalakan kipas terlebih dahulu dari luar ruangan, bahkan dari lantai lain, hanya menggunakan browser di HP Anda.

Inilah yang akan kita bangun di artikel ini.

Mengenal Web Server pada ESP32

Apa Itu Web Server?

Web Server adalah sebuah program yang berjalan di suatu perangkat, menunggu permintaan (request) dari browser, kemudian merespons dengan halaman web berupa HTML.

Ketika Anda mengetik sebuah URL di browser — misalnya http://192.168.1.100 — browser sebenarnya sedang mengirimkan HTTP Request ke alamat tersebut. Web server yang berjalan di alamat itu kemudian membaca request tersebut dan mengirimkan kembali HTTP Response berisi halaman HTML yang kemudian dirender oleh browser.

Pada ESP32, kita menjalankan web server mini ini langsung di dalam chip, tanpa server eksternal, tanpa internet — cukup koneksi ke jaringan WiFi lokal.

Bagaimana ESP32 Tahu Apa yang Diminta Browser?

Setiap kali browser mengirim request, ESP32 membaca baris pertama dari HTTP Request tersebut, yang berisi method dan URL path. Contohnya:

GET / HTTP/1.1          → Permintaan halaman utama
GET /kipas/on HTTP/1.1  → Permintaan menyalakan kipas
GET /kipas/off HTTP/1.1 → Permintaan mematikan kipas

ESP32 membaca string ini, lalu memutuskan apa yang harus dilakukan dan halaman HTML apa yang harus dikirimkan kembali. Inilah mekanisme utama yang akan kita gunakan untuk mengendalikan perangkat dari browser.

WiFi pada ESP32

ESP32 mendukung dua mode WiFi:

• Station Mode (STA) — ESP32 bergabung ke jaringan WiFi yang sudah ada (seperti router rumah atau kantor). Mode ini yang kita gunakan.
• Access Point Mode (AP) — ESP32 menjadi router WiFi sendiri, perangkat lain terhubung langsung ke ESP32.
• Dual Mode — menjalankan keduanya sekaligus.

Untuk proyek ini kita menggunakan Station Mode agar ESP32 terhubung ke router WiFi yang sama dengan HP atau laptop Anda, sehingga keduanya bisa saling berkomunikasi.

Persiapan Hardware

Komponen yang Dibutuhkan

Wiring

BMP280 → ESP32 (I2C):

LED Kipas → ESP32:

Catatan: Kita menggunakan sensor BMP280 yang sudah dikenal sejak artikel Belajar ESP32: External Sensor. Jika Anda memiliki sensor DHT22 atau DS18B20, konsepnya sama — hanya bagian pembacaan sensornya yang perlu disesuaikan.

Tahap 1: Menghubungkan ESP32 ke WiFi

Sebelum membangun web server, pastikan ESP32 bisa terhubung ke jaringan WiFi. Program berikut adalah titik awal — ESP32 terhubung ke WiFi dan mencetak alamat IP-nya ke Serial Monitor.

#include <WiFi.h>

const char* ssid     = "NAMA_WIFI_ANDA";
const char* password = "PASSWORD_WIFI_ANDA";

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

  Serial.print("Menghubungkan ke WiFi: ");
  Serial.println(ssid);

  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("\nWiFi terhubung!");
  Serial.print("Alamat IP ESP32: ");
  Serial.println(WiFi.localIP());
}

void loop() {
  // Tidak ada yang dilakukan di sini
}

Upload kode ini, buka Serial Monitor (baud rate 115200), dan Anda akan melihat output seperti ini:

Menghubungkan ke WiFi: NamaWiFiAnda
.....
WiFi terhubung!
Alamat IP ESP32: 192.168.1.7

Catat alamat IP yang muncul — ini adalah alamat yang nantinya kita ketik di browser untuk membuka halaman web ESP32.

Penting: Pastikan laptop atau HP yang akan Anda gunakan untuk membuka browser terhubung ke WiFi yang sama dengan ESP32. Web server kita berjalan di jaringan lokal, bukan internet.

Tahap 2: Web Server Dasar — Kontrol LED dari Browser

Sebelum masuk ke proyek utama, mari kita pahami cara kerja web server ESP32 dengan contoh sederhana: sebuah halaman web yang menampilkan tombol untuk menyalakan dan mematikan LED.

Struktur Kode Web Server

#include <WiFi.h>

const char* ssid     = "NAMA_WIFI_ANDA";
const char* password = "PASSWORD_WIFI_ANDA";

WiFiServer server(80);  // Port 80 = HTTP standar

const int ledPin = 2;
String ledState  = "OFF";
String header    = "";

unsigned long previousTime = 0;
const long    timeoutTime  = 2000;

void setup() {
  Serial.begin(115200);
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW);

  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("\nWiFi terhubung. IP: " + WiFi.localIP().toString());
  server.begin();
}

void loop() {
  WiFiClient client = server.available();

  if (client) {
    unsigned long currentTime = millis();
    previousTime = currentTime;
    String currentLine = "";

    while (client.connected() && millis() - previousTime <= timeoutTime) {
      if (client.available()) {
        char c = client.read();
        header += c;

        if (c == '\n') {
          // Baris kosong = akhir dari HTTP request
          if (currentLine.length() == 0) {
            // Proses perintah dari URL
            if (header.indexOf("GET /led/on") >= 0) {
              digitalWrite(ledPin, HIGH);
              ledState = "ON";
            } else if (header.indexOf("GET /led/off") >= 0) {
              digitalWrite(ledPin, LOW);
              ledState = "OFF";
            }

            // Kirim respons HTTP
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();

            // Kirim halaman HTML
            client.println("<!DOCTYPE html>");
            client.println("<html><head>");
            client.println("<meta name='viewport' content='width=device-width, initial-scale=1'>");
            client.println("<title>ESP32 LED Control</title>");
            client.println("<style>");
            client.println("body { font-family: Arial; text-align: center; padding: 20px; }");
            client.println("h1 { color: #333; }");
            client.println(".btn { display: inline-block; padding: 14px 36px; font-size: 20px;");
            client.println("       border: none; border-radius: 6px; cursor: pointer; text-decoration: none; }");
            client.println(".btn-on  { background-color: #4CAF50; color: white; }");
            client.println(".btn-off { background-color: #f44336; color: white; }");
            client.println("</style></head><body>");
            client.println("<h1>ESP32 Web Server</h1>");
            client.println("<p>Status LED: <strong>" + ledState + "</strong></p>");

            if (ledState == "OFF") {
              client.println("<p><a href='/led/on'><button class='btn btn-on'>Nyalakan LED</button></a></p>");
            } else {
              client.println("<p><a href='/led/off'><button class='btn btn-off'>Matikan LED</button></a></p>");
            }

            client.println("</body></html>");
            client.println();
            break;

          } else {
            currentLine = "";
          }
        } else if (c != '\r') {
          currentLine += c;
        }
      }
    }

    header = "";
    client.stop();
  }
}

Penjelasan Cara Kerja

WiFiServer server(80) — membuat objek server yang mendengarkan koneksi masuk di port 80, yaitu port standar HTTP.

server.available() — di dalam loop(), baris ini terus memeriksa apakah ada browser yang sedang mencoba terhubung. Jika ada, akan mengembalikan objek WiFiClient.

Membaca HTTP Request — setelah client terhubung, kita membaca karakter satu per satu dan mengumpulkannya ke dalam variabel header. HTTP Request diakhiri dengan dua baris kosong berturut-turut (\n\n).

Memproses URL — setelah request selesai dibaca, kita memeriksa apakah string header mengandung path tertentu:

if (header.indexOf("GET /led/on") >= 0) { ... }

Ini berarti: jika browser meminta URL /led/on, nyalakan LED. Jika /led/off, matikan LED.

Mengirim respons HTML — setelah memproses perintah, kita mengirim respons HTTP yang valid diikuti konten HTML. Setiap baris dikirim menggunakan client.println().

client.stop() — setelah selesai melayani request, tutup koneksi agar siap menerima client berikutnya.

Akses http://[IP-ESP32] di browser Anda. Anda akan melihat halaman sederhana dengan tombol nyala/mati.

Tahap 3: Web Server + Sensor BMP280 — Monitoring Suhu

Sekarang kita tambahkan sensor BMP280 untuk menampilkan suhu di halaman web.

#include <WiFi.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BMP280.h>

const char* ssid     = "NAMA_WIFI_ANDA";
const char* password = "PASSWORD_WIFI_ANDA";

WiFiServer server(80);
Adafruit_BMP280 bmp;

String header = "";
unsigned long previousTime = 0;
const long    timeoutTime  = 2000;

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

  if (!bmp.begin(0x76)) {
    Serial.println("BMP280 tidak ditemukan!");
    while (1);
  }

  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("\nWiFi terhubung. IP: " + WiFi.localIP().toString());
  server.begin();
}

void loop() {
  WiFiClient client = server.available();

  if (client) {
    unsigned long currentTime = millis();
    previousTime = currentTime;
    String currentLine = "";

    while (client.connected() && millis() - previousTime <= timeoutTime) {
      if (client.available()) {
        char c = client.read();
        header += c;

        if (c == '\n') {
          if (currentLine.length() == 0) {
            // Baca sensor
            float suhu    = bmp.readTemperature();
            float tekanan = bmp.readPressure() / 100.0F;

            // Kirim respons
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();

            client.println("<!DOCTYPE html><html><head>");
            client.println("<meta name='viewport' content='width=device-width, initial-scale=1'>");
            client.println("<meta http-equiv='refresh' content='10'>");
            client.println("<title>Monitor Suhu ESP32</title>");
            client.println("<style>");
            client.println("body { font-family: Arial; text-align: center; background: #f0f0f0; padding: 20px; }");
            client.println(".card { background: white; border-radius: 12px; padding: 20px;");
            client.println("        display: inline-block; margin: 10px; min-width: 150px; }");
            client.println(".value { font-size: 48px; font-weight: bold; color: #e74c3c; }");
            client.println(".label { font-size: 14px; color: #888; margin-top: 8px; }");
            client.println("</style></head><body>");
            client.println("<h1>Monitor Ruangan</h1>");
            client.println("<p style='color:#888;font-size:13px'>Auto-refresh setiap 10 detik</p>");

            client.println("<div class='card'>");
            client.println("<div class='value'>" + String(suhu, 1) + "°C</div>");
            client.println("<div class='label'>Suhu</div>");
            client.println("</div>");

            client.println("<div class='card'>");
            client.println("<div class='value' style='color:#3498db'>" + String(tekanan, 0) + "</div>");
            client.println("<div class='label'>Tekanan (hPa)</div>");
            client.println("</div>");

            client.println("</body></html>");
            client.println();
            break;

          } else {
            currentLine = "";
          }
        } else if (c != '\r') {
          currentLine += c;
        }
      }
    }

    header = "";
    client.stop();
  }
}

Tag <meta http-equiv='refresh' content='10'> di dalam <head> membuat browser secara otomatis me-refresh halaman setiap 10 detik. Ini adalah cara termudah untuk membuat tampilan monitoring yang selalu menampilkan data terbaru tanpa user harus menekan F5 secara manual.

Tahap 4: Proyek Utama — Sistem Pengawasan dan Pengendalian Ruangan

Inilah puncak dari artikel ini — kita gabungkan semua yang sudah dipelajari menjadi satu sistem yang lengkap: monitoring suhu ruangan dan pengendalian kipas angin dari browser.

Fitur sistem yang akan dibangun:

• Menampilkan suhu dan tekanan udara ruangan secara real-time
• Tombol ON/OFF untuk kipas angin (dimodelkan dengan LED)
• Status kipas saat ini ditampilkan dengan jelas
• Indikator visual (warna berbeda) untuk kondisi suhu: normal, hangat, panas
• Halaman responsif, bisa diakses dari HP maupun laptop
• Auto-refresh data sensor setiap 15 detik

#include <WiFi.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BMP280.h>

// ============================================
// KONFIGURASI — sesuaikan dengan jaringan Anda
// ============================================
const char* ssid     = "NAMA_WIFI_ANDA";
const char* password = "PASSWORD_WIFI_ANDA";

// ============================================
// KONFIGURASI PIN
// ============================================
const int PIN_KIPAS = 2;  // LED simulasi kipas

// ============================================
// OBJEK DAN VARIABEL
// ============================================
WiFiServer server(80);
Adafruit_BMP280 bmp;

String header      = "";
String statusKipas = "OFF";

unsigned long previousTime = 0;
const long    timeoutTime  = 2000;

// ============================================
// FUNGSI: Tentukan warna berdasarkan suhu
// ============================================
String warnasuhu(float suhu) {
  if (suhu < 27.0)  return "#2ecc71";  // Hijau = nyaman
  if (suhu < 32.0)  return "#f39c12";  // Oranye = hangat
  return "#e74c3c";                    // Merah = panas
}

String kondisiSuhu(float suhu) {
  if (suhu < 27.0) return "Nyaman";
  if (suhu < 32.0) return "Hangat";
  return "Panas";
}

// ============================================
// FUNGSI: Kirim halaman HTML
// ============================================
void kirimHalamanWeb(WiFiClient &client) {
  float suhu    = bmp.readTemperature();
  float tekanan = bmp.readPressure() / 100.0F;

  String warnaSuhu    = warnasuhu(suhu);
  String kondisi      = kondisiSuhu(suhu);
  String warnaKipas   = (statusKipas == "ON") ? "#2ecc71" : "#95a5a6";
  String warnaTombol  = (statusKipas == "ON") ? "#e74c3c" : "#2ecc71";
  String labelTombol  = (statusKipas == "ON") ? "Matikan Kipas" : "Nyalakan Kipas";
  String urlTombol    = (statusKipas == "ON") ? "/kipas/off"     : "/kipas/on";

  client.println("HTTP/1.1 200 OK");
  client.println("Content-type:text/html");
  client.println("Connection: close");
  client.println();

  // === HTML HEAD ===
  client.println("<!DOCTYPE html>");
  client.println("<html lang='id'><head>");
  client.println("<meta charset='UTF-8'>");
  client.println("<meta name='viewport' content='width=device-width, initial-scale=1'>");
  client.println("<meta http-equiv='refresh' content='15'>");
  client.println("<title>Monitor Ruangan</title>");
  client.println("<style>");

  // Reset & base
  client.println("* { box-sizing: border-box; margin: 0; padding: 0; }");
  client.println("body { font-family: 'Segoe UI', Arial, sans-serif; background: #1a1a2e;");
  client.println("       color: #eee; min-height: 100vh; padding: 20px; }");

  // Header
  client.println(".header { text-align: center; padding: 20px 0 10px; }");
  client.println(".header h1 { font-size: 24px; color: #eee; letter-spacing: 1px; }");
  client.println(".header p  { font-size: 12px; color: #888; margin-top: 4px; }");

  // Grid container
  client.println(".grid { display: flex; flex-wrap: wrap; justify-content: center;");
  client.println("        gap: 16px; max-width: 500px; margin: 20px auto; }");

  // Card
  client.println(".card { background: #16213e; border-radius: 16px; padding: 24px 20px;");
  client.println("        flex: 1; min-width: 140px; text-align: center;");
  client.println("        box-shadow: 0 4px 15px rgba(0,0,0,0.3); }");

  // Nilai besar
  client.println(".card-value { font-size: 44px; font-weight: 700; line-height: 1; }");
  client.println(".card-label { font-size: 12px; color: #888; margin-top: 8px; text-transform: uppercase; letter-spacing: 1px; }");
  client.println(".card-badge { display: inline-block; margin-top: 10px; padding: 3px 10px;");
  client.println("              border-radius: 20px; font-size: 11px; font-weight: 600; }");

  // Kipas card
  client.println(".kipas-status { font-size: 20px; font-weight: 700; margin-top: 4px; }");

  // Tombol
  client.println(".btn { display: block; width: 100%; max-width: 300px; margin: 10px auto;");
  client.println("       padding: 16px; font-size: 16px; font-weight: 600; color: white;");
  client.println("       border: none; border-radius: 12px; cursor: pointer;");
  client.println("       text-decoration: none; text-align: center;");
  client.println("       transition: opacity 0.2s; }");
  client.println(".btn:hover { opacity: 0.85; }");

  // Footer
  client.println(".footer { text-align: center; margin-top: 24px; font-size: 11px; color: #555; }");

  client.println("</style></head><body>");

  // === HTML BODY ===
  client.println("<div class='header'>");
  client.println("<h1>&#127968; Monitor Ruangan</h1>");
  client.println("<p>Data diperbarui otomatis setiap 15 detik</p>");
  client.println("</div>");

  client.println("<div class='grid'>");

  // --- Card Suhu ---
  client.println("<div class='card'>");
  client.println("<div class='card-value' style='color:" + warnaSuhu + "'>");
  client.println(String(suhu, 1) + "&#176;C");
  client.println("</div>");
  client.println("<div class='card-label'>Suhu Ruangan</div>");
  client.println("<span class='card-badge' style='background:" + warnaSuhu + "33; color:" + warnaSuhu + "'>");
  client.println(kondisi);
  client.println("</span>");
  client.println("</div>");

  // --- Card Tekanan ---
  client.println("<div class='card'>");
  client.println("<div class='card-value' style='color:#3498db'>");
  client.println(String(tekanan, 0));
  client.println("</div>");
  client.println("<div class='card-label'>Tekanan (hPa)</div>");
  client.println("</div>");

  // --- Card Kipas ---
  client.println("<div class='card' style='flex-basis: 100%; max-width: 300px;'>");
  client.println("<div class='card-label'>Status Kipas</div>");
  client.println("<div class='kipas-status' style='color:" + warnaKipas + "; margin-top: 10px;'>");
  client.println((statusKipas == "ON") ? "&#128168; Menyala" : "&#9711; Mati");
  client.println("</div>");
  client.println("</div>");

  client.println("</div>");  // end .grid

  // Tombol kontrol kipas
  client.println("<a href='" + urlTombol + "' class='btn' style='background:" + warnaTombol + "'>");
  client.println(labelTombol);
  client.println("</a>");

  client.println("<div class='footer'>");
  client.println("ESP32 Room Monitor &mdash; IP: " + WiFi.localIP().toString());
  client.println("</div>");

  client.println("</body></html>");
  client.println();
}

// ============================================
// SETUP
// ============================================
void setup() {
  Serial.begin(115200);
  pinMode(PIN_KIPAS, OUTPUT);
  digitalWrite(PIN_KIPAS, LOW);

  // Inisialisasi sensor BMP280
  if (!bmp.begin(0x76)) {
    Serial.println("BMP280 tidak ditemukan! Periksa wiring.");
    while (1);
  }
  Serial.println("BMP280 siap.");

  // Koneksi WiFi
  Serial.print("Menghubungkan ke WiFi: ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("\nWiFi terhubung!");
  Serial.print("Buka browser dan akses: http://");
  Serial.println(WiFi.localIP());

  server.begin();
}

// ============================================
// LOOP
// ============================================
void loop() {
  WiFiClient client = server.available();

  if (client) {
    unsigned long currentTime = millis();
    previousTime = currentTime;
    String currentLine = "";

    Serial.println("Browser terhubung.");

    while (client.connected() && millis() - previousTime <= timeoutTime) {
      if (client.available()) {
        char c = client.read();
        header += c;

        if (c == '\n') {
          if (currentLine.length() == 0) {
            // Proses perintah dari URL
            if (header.indexOf("GET /kipas/on") >= 0) {
              Serial.println("[WEB] Perintah: Kipas ON");
              statusKipas = "ON";
              digitalWrite(PIN_KIPAS, HIGH);
            } else if (header.indexOf("GET /kipas/off") >= 0) {
              Serial.println("[WEB] Perintah: Kipas OFF");
              statusKipas = "OFF";
              digitalWrite(PIN_KIPAS, LOW);
            }

            // Kirim halaman web
            kirimHalamanWeb(client);
            break;

          } else {
            currentLine = "";
          }
        } else if (c != '\r') {
          currentLine += c;
        }
      }
    }

    header = "";
    client.stop();
    Serial.println("Browser selesai. Koneksi ditutup.\n");
  }
}

Penjelasan Kode Proyek Utama

Modularisasi dengan fungsi kirimHalamanWeb() — berbeda dengan contoh-contoh dasar yang menulis HTML langsung di dalam loop(), kode ini memisahkan logika pengiriman HTML ke fungsi tersendiri. Ini membuat kode jauh lebih mudah dibaca dan dimodifikasi.

Fungsi warnasuhu() dan kondisiSuhu() — dua helper function ini mengonversi nilai suhu menjadi warna dan label kondisi yang sesuai:

if (suhu < 27.0)  return "#2ecc71";  // Hijau  = nyaman
if (suhu < 32.0)  return "#f39c12";  // Oranye = hangat
return "#e74c3c";                    // Merah  = panas

Logika ini bisa disesuaikan dengan kebutuhan — misalnya diubah ambang batasnya untuk ruang server yang toleransi panasnya berbeda dengan kamar tidur.

Tampilan dinamis berdasarkan state — warna dan label tombol berubah otomatis mengikuti status kipas saat ini. Ketika kipas mati, tombol berwarna hijau dengan teks “Nyalakan Kipas”. Ketika kipas menyala, tombol berubah merah dengan teks “Matikan Kipas”. Ini mencegah kebingungan karena tombol selalu menunjukkan aksi yang akan dilakukan, bukan status saat ini.

Auto-refresh — tag <meta http-equiv='refresh' content='15'> membuat browser otomatis memuat ulang halaman setiap 15 detik sehingga data suhu selalu segar tanpa user perlu menyentuh apapun.

Cara Menggunakan Sistem

1. Ganti NAMA_WIFI_ANDA dan PASSWORD_WIFI_ANDA dengan kredensial WiFi Anda
2. Upload kode ke ESP32
3. Buka Serial Monitor (baud rate 115200)
4. Tunggu hingga muncul pesan Buka browser dan akses: http://192.168.x.x
5. Buka browser di HP atau laptop Anda (pastikan terhubung WiFi yang sama)
6. Ketik alamat IP tersebut di address bar browser
7. Halaman monitor ruangan akan tampil

Dari halaman tersebut, Anda bisa:

• Melihat suhu dan tekanan ruangan saat ini
• Melihat indikator kondisi: Nyaman / Hangat / Panas
• Menyalakan atau mematikan kipas dengan satu klik tombol
• Membiarkan halaman terbuka — data akan diperbarui otomatis setiap 15 detik

Kesimpulan

Kita telah berhasil membangun sebuah sistem pengawasan dan pengendalian ruangan yang bisa diakses dari browser manapun di jaringan lokal. Mulai dari koneksi WiFi sederhana, web server dasar, monitoring sensor, hingga sistem kontrol lengkap dengan antarmuka yang responsif.

Poin-poin penting yang sudah kita pelajari:

• ESP32 terhubung ke WiFi menggunakan Station Mode dan mendapatkan alamat IP dari router
• Web server berjalan di port 80 menggunakan library WiFi.h bawaan ESP32
• Browser berkomunikasi dengan ESP32 melalui HTTP GET request — URL path digunakan sebagai perintah
• HTML yang dihasilkan ESP32 bisa mengandung CSS untuk tampilan yang baik di HP maupun laptop
• Tag <meta http-equiv='refresh'> memungkinkan auto-refresh data sensor secara periodik
• Dengan memisahkan logika ke dalam fungsi terpisah, kode menjadi lebih bersih dan mudah dikembangkan
• LED simulasi kipas bisa diganti dengan relay + kipas sungguhan tanpa mengubah kode ESP32

Proyek ini adalah fondasi yang sangat kuat untuk dikembangkan lebih lanjut — misalnya menambahkan grafik historis suhu, integrasi dengan MQTT, atau membuat halaman admin yang lebih lengkap dengan otentikasi password.

Referensi

• https://randomnerdtutorials.com/esp32-web-server-arduino-ide/
• https://randomnerdtutorials.com/esp32-web-server-with-bme280-mini-weather-station/
• https://randomnerdtutorials.com/esp32-useful-wi-fi-functions-arduino/