Cara Membuat Web Server di ESP32 — Simulasi Online

ESP32 bisa menjadi web server mungil: ia menyajikan halaman web yang tombolnya menyalakan dan mematikan LED. Di template ini dua LED di GPIO26 dan GPIO27 dikendalikan dari halaman web virtual.

Komponen yang dipakai

• ESP32
• Breadboard (setengah)
• LED
• Resistor

Cara kerja

1. ESP32 terhubung ke WiFi virtual dengan WiFi.begin(), lalu WebServer dijalankan di port 80.
2. Saat halaman dibuka, fungsi sendHtml() mengirim halaman berisi status dan tombol kedua LED.
3. Klik tombol di halaman mengirim permintaan ke route yang sesuai (memakai UriBraces).
4. Program mengubah status LED yang diminta, lalu server.handleClient() di loop() terus melayani pengunjung berikutnya.

Konsep yang dipelajari

Kode program

#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include <uri/UriBraces.h>

#define WIFI_SSID "NOVIOT"
#define WIFI_PASSWORD "12345678"
#define WIFI_CHANNEL 6

WebServer server(80);

const int LED1 = 26;
const int LED2 = 27;

bool led1State = false;
bool led2State = false;

void sendHtml() {
  String response = R"(
    <!DOCTYPE html><html>
      <head>
        <title>ESP32 Web Server Demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
          html { font-family: sans-serif; text-align: center; }
          body { display: inline-flex; flex-direction: column; }
          h1 { margin-bottom: 1.2em; }
          h2 { margin: 0; }
          div { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-auto-flow: column; grid-gap: 1em; }
          .btn { background-color: #5B5; border: none; color: #fff; padding: 0.5em 1em;
                 font-size: 2em; text-decoration: none }
          .btn.OFF { background-color: #333; }
        </style>
      </head>
      <body>
        <h1>ESP32 Web Server</h1>
        <div>
          <h2>LED 1</h2>
          <a href="/toggle/1" class="btn LED1_TEXT">LED1_TEXT</a>
          <h2>LED 2</h2>
          <a href="/toggle/2" class="btn LED2_TEXT">LED2_TEXT</a>
        </div>
      </body>
    </html>
  )";
  response.replace("LED1_TEXT", led1State ? "ON" : "OFF");
  response.replace("LED2_TEXT", led2State ? "ON" : "OFF");
  server.send(200, "text/html", response);
}

void setup(void) {
  Serial.begin(115200);
  pinMode(LED1, OUTPUT);
  pinMode(LED2, OUTPUT);

  WiFi.begin(WIFI_SSID, WIFI_PASSWORD, WIFI_CHANNEL);
  Serial.print("Connecting to WiFi ");
  Serial.print(WIFI_SSID);
  while (WiFi.status() != WL_CONNECTED) {
    delay(100);
    Serial.print(".");
  }
  Serial.println(" Connected!");

  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  server.on("/", sendHtml);
  server.on(UriBraces("/toggle/{}"), []() {
    String led = server.pathArg(0);
    Serial.print("Toggle LED #");
    Serial.println(led);
    if (led.toInt() == 1) {
      led1State = !led1State;
      digitalWrite(LED1, led1State);
    } else if (led.toInt() == 2) {
      led2State = !led2State;
      digitalWrite(LED2, led2State);
    }
    sendHtml();
  });

  server.begin();
  Serial.println("HTTP server started");
}

void loop(void) {
  server.handleClient();
  delay(2);
}

Template ESP32 lainnya

• ESP32 Blink (LED biru) — LED biru eksternal di GPIO2 berkedip setiap 500 ms (LED built-in ikut berkedip).
• ESP32 MQTT — ESP32 kirim data suhu ke broker MQTT virtual tiap 2 detik, dan LED (GPIO2) bisa dinyalakan/dimatikan dari tab MQTT (topik noviot/lampu, pesan ON/OFF).
• ESP32 WiFi Connect — ESP32 terhubung ke WiFi virtual dan mencetak alamat IP ke Serial Monitor.