ESP32 Web Server: Membuat Kontrol Perangkat IoT melalui Browser

ESP32 Web Server memungkinkan kita mengontrol perangkat IoT langsung melalui browser tanpa harus membuat aplikasi mobile khusus. ESP32 dapat terhubung ke jaringan WiFi, menjalankan HTTP server sederhana, menerima request dari browser, kemudian mengontrol GPIO seperti LED, relay, buzzer, atau sensor.

Konsep ini sangat berguna untuk membuat prototype IoT seperti kontrol lampu, monitoring sensor, smart home sederhana, kontrol kipas, hingga dashboard perangkat lokal.

Pada tutorial ini kita akan membuat Web Server pada ESP32 menggunakan Arduino IDE. Browser akan menampilkan halaman web yang memiliki tombol untuk menyalakan dan mematikan LED yang terhubung ke GPIO ESP32.

Apa Itu ESP32 Web Server?

ESP32 Web Server adalah program yang membuat ESP32 dapat menerima dan merespons HTTP request melalui jaringan.

Secara sederhana, arsitekturnya seperti berikut:

+------------------+
|     Browser      |
|  Laptop/Phone    |
+--------+---------+
         |
         | HTTP Request
         |
         v
+------------------+
|      ESP32       |
|   Web Server     |
+--------+---------+
         |
         | GPIO
         v
+------------------+
| LED / Relay /    |
| Sensor / Device  |
+------------------+

ESP32 bertindak sebagai server, sedangkan browser bertindak sebagai client.

Ketika pengguna menekan tombol ON, browser mengirim request ke ESP32. ESP32 kemudian memproses request tersebut dan mengubah kondisi GPIO.

Mengapa ESP32 Cocok untuk Web Server IoT?

ESP32 memiliki beberapa fitur yang membuatnya cocok untuk project IoT berbasis web:

WiFi bawaan.
GPIO untuk mengontrol perangkat elektronik.
Processor yang cukup untuk menjalankan HTTP server sederhana.
Memory yang memadai untuk prototype IoT.
Dukungan Arduino IDE.
Dapat berkomunikasi menggunakan HTTP dan protokol jaringan lainnya.
Konsumsi daya relatif rendah untuk berbagai skenario IoT.

Karena WiFi sudah tersedia pada ESP32, kita tidak membutuhkan modul WiFi tambahan untuk membuat Web Server sederhana.

Peralatan yang Dibutuhkan

Untuk mengikuti tutorial ini, siapkan:

ESP32 development board.
Kabel USB.
Komputer dengan Arduino IDE.
LED dan resistor jika menggunakan LED eksternal.
Jaringan WiFi yang dapat diakses ESP32 dan perangkat browser.

Jika menggunakan board ESP32 yang memiliki built-in LED, Anda dapat menggunakan LED tersebut apabila GPIO LED pada board sesuai dengan board yang digunakan.

Persiapan Arduino IDE

Pastikan board ESP32 sudah tersedia di Arduino IDE.

Setelah board ESP32 terpasang, pilih board yang sesuai melalui menu board Arduino IDE.

Hubungkan ESP32 menggunakan kabel USB, kemudian pilih port yang digunakan oleh board.

Struktur program yang akan kita buat cukup sederhana:

ESP32
 |
 +-- Connect to WiFi
 |
 +-- Start Web Server
 |
 +-- Wait for HTTP Request
 |
 +-- Process Request
 |
 +-- Control GPIO
 |
 +-- Send HTML Response

Konfigurasi WiFi ESP32

ESP32 dapat terhubung ke WiFi menggunakan library WiFi.h.

Contoh dasar:

#include <WiFi.h>

const char* ssid = "NAMA_WIFI";
const char* password = "PASSWORD_WIFI";

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

    WiFi.begin(ssid, password);

    Serial.print("Menghubungkan ke WiFi");

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

    Serial.println();
    Serial.println("WiFi terhubung");
    Serial.println(WiFi.localIP());
}

void loop() {
}

Setelah ESP32 berhasil terhubung, alamat IP lokal akan ditampilkan melalui Serial Monitor.

Misalnya:

WiFi terhubung
192.168.1.50

Alamat IP tersebut nantinya digunakan untuk membuka Web Server dari browser.

Membuat HTTP Web Server

ESP32 dapat menjalankan server HTTP sederhana menggunakan library WebServer.h.

Contoh dasar:

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

const char* ssid = "NAMA_WIFI";
const char* password = "PASSWORD_WIFI";

WebServer server(80);

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

    WiFi.begin(ssid, password);

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

    Serial.println(WiFi.localIP());

    server.begin();
}

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

Port 80 digunakan sebagai port HTTP standar.

Bagaimana WebServer ESP32 Bekerja?

Program memiliki dua bagian penting:

WebServer server(80);

dan:

server.handleClient();

Object server menangani HTTP server, sedangkan handleClient() perlu dipanggil berulang kali di dalam loop() agar server dapat memproses request client.

Membuat Route HTTP

Selanjutnya kita dapat menentukan apa yang harus dilakukan ketika browser mengakses URL tertentu.

Contohnya:

server.on("/", []() {
    server.send(200, "text/plain", "Hello from ESP32");
});

Ketika browser mengakses:

http://192.168.1.50/

ESP32 akan mengirim response:

Hello from ESP32

Membuat Halaman HTML

Agar lebih menarik, response dapat berupa HTML.

server.on("/", []() {
    server.send(
        200,
        "text/html",
        "<h1>ESP32 Web Server</h1>"
    );
});

Browser akan merender response tersebut sebagai halaman HTML.

Mengontrol GPIO ESP32

Sekarang kita akan menghubungkan Web Server dengan GPIO.

Misalnya menggunakan GPIO 2:

const int LED_PIN = 2;

void setup() {
    pinMode(LED_PIN, OUTPUT);
}

Untuk menyalakan LED:

digitalWrite(LED_PIN, HIGH);

Untuk mematikannya:

digitalWrite(LED_PIN, LOW);

Membuat Tombol ON dan OFF

Kita dapat membuat dua route:

server.on("/on", []() {
    digitalWrite(LED_PIN, HIGH);

    server.send(
        200,
        "text/plain",
        "LED ON"
    );
});

server.on("/off", []() {
    digitalWrite(LED_PIN, LOW);

    server.send(
        200,
        "text/plain",
        "LED OFF"
    );
});

Sekarang browser dapat mengontrol LED melalui:

http://192.168.1.50/on
http://192.168.1.50/off

Membuat Interface Web

Agar user tidak perlu mengetik URL secara manual, kita dapat membuat halaman HTML dengan tombol.

const char* html = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ESP32 Control</title>
</head>
<body>
    <h1>ESP32 Control</h1>

    <a href="/on">
        <button>ON</button>
    </a>

    <a href="/off">
        <button>OFF</button>
    </a>
</body>
</html>
)rawliteral";

Raw string literal R"rawliteral(...)" memudahkan kita menulis HTML multiline di dalam source code C++.

Route untuk Halaman Utama

HTML tersebut dapat dikirim dari route utama:

server.on("/", []() {
    server.send(200, "text/html", html);
});

Saat membuka IP ESP32 dari browser, halaman kontrol akan ditampilkan.

Program ESP32 Web Server Lengkap

Berikut contoh lengkap yang dapat digunakan sebagai dasar project.

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

const char* ssid = "NAMA_WIFI";
const char* password = "PASSWORD_WIFI";

const int LED_PIN = 2;

WebServer server(80);

const char* html = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1"
    >
    <title>ESP32 Control</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 50px;
        }

        button {
            padding: 15px 30px;
            margin: 10px;
            font-size: 18px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <h1>ESP32 Web Server</h1>

    <p>Kontrol LED melalui browser</p>

    <a href="/on">
        <button>ON</button>
    </a>

    <a href="/off">
        <button>OFF</button>
    </a>
</body>
</html>
)rawliteral";

void handleRoot() {
    server.send(200, "text/html", html);
}

void handleOn() {
    digitalWrite(LED_PIN, HIGH);

    server.send(
        200,
        "text/plain",
        "LED berhasil dinyalakan"
    );
}

void handleOff() {
    digitalWrite(LED_PIN, LOW);

    server.send(
        200,
        "text/plain",
        "LED berhasil dimatikan"
    );
}

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

    pinMode(LED_PIN, OUTPUT);
    digitalWrite(LED_PIN, LOW);

    WiFi.begin(ssid, password);

    Serial.print("Menghubungkan ke WiFi");

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

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

    server.on("/", handleRoot);
    server.on("/on", handleOn);
    server.on("/off", handleOff);

    server.begin();

    Serial.println("Web Server berjalan");
}

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

Cara Menjalankan Program

Hubungkan ESP32 ke komputer.
Buka Arduino IDE.
Masukkan kode program.
Ganti nama WiFi dan password.
Pilih board ESP32 yang sesuai.
Pilih port USB ESP32.
Upload program.
Buka Serial Monitor.
Pastikan ESP32 berhasil mendapatkan IP address.
Buka IP tersebut melalui browser.

Contoh:

http://192.168.1.50

Pastikan komputer atau smartphone yang digunakan untuk membuka browser berada pada jaringan yang dapat mengakses ESP32.

Alur Request Browser ke ESP32

Browser
   |
   | GET /
   v
ESP32 Web Server
   |
   | Return HTML
   v
Browser
   |
   | User klik ON
   |
   | GET /on
   v
ESP32
   |
   | digitalWrite(HIGH)
   v
LED ON

Untuk tombol OFF:

Browser
   |
   | GET /off
   v
ESP32
   |
   | digitalWrite(LOW)
   v
LED OFF

Menggunakan POST untuk Kontrol

Untuk aplikasi yang lebih serius, operasi yang mengubah state perangkat dapat dirancang menggunakan HTTP method yang sesuai, misalnya POST.

Contoh route:

server.on("/led/on", HTTP_POST, []() {
    digitalWrite(LED_PIN, HIGH);

    server.send(
        200,
        "application/json",
        "{\"status\":\"on\"}"
    );
});

Namun, penggunaan POST berarti halaman browser perlu mengirim request POST menggunakan form atau JavaScript.

Mengontrol ESP32 dengan JavaScript

Daripada menggunakan link biasa, halaman web dapat menggunakan JavaScript untuk mengirim request ke ESP32.

<button onclick="turnOn()">ON</button>
<button onclick="turnOff()">OFF</button>

<script>
function turnOn() {
    fetch('/on');
}

function turnOff() {
    fetch('/off');
}
</script>

Dengan fetch(), halaman tidak harus melakukan reload setiap kali tombol ditekan.

Mengirim Response JSON

Untuk aplikasi IoT yang lebih terstruktur, ESP32 dapat mengirim response dalam format JSON.

server.on("/status", []() {
    String json = "{\"led\":true}";

    server.send(
        200,
        "application/json",
        json
    );
});

Browser kemudian dapat membaca response tersebut menggunakan JavaScript.

fetch('/status')
    .then(response => response.json())
    .then(data => {
        console.log(data.led);
    });

Membuat Endpoint Status

Daripada hanya mengontrol LED, kita dapat membuat endpoint untuk membaca kondisi GPIO.

server.on("/status", []() {
    bool ledState = digitalRead(LED_PIN);

    String json = "{";
    json += "\"led\":";
    json += ledState ? "true" : "false";
    json += "}";

    server.send(
        200,
        "application/json",
        json
    );
});

Dengan endpoint ini, dashboard web dapat mengetahui kondisi perangkat.

Membuat Dashboard IoT Sederhana

Arsitektur aplikasi dapat berkembang menjadi:

+----------------------+
|      Browser         |
|----------------------|
| LED     [ ON ]       |
| Relay   [ OFF ]      |
| Temp    28.5 C       |
| Humidity 70%         |
+----------+-----------+
           |
           | HTTP / JSON
           v
+----------------------+
|        ESP32         |
|----------------------|
| GPIO                 |
| Sensor               |
| Relay                |
+----------------------+

Browser bertindak sebagai dashboard, sedangkan ESP32 menyediakan endpoint API sederhana.

Mengontrol Relay

Konsep yang sama dapat digunakan untuk relay.

const int RELAY_PIN = 5;

void setup() {
    pinMode(RELAY_PIN, OUTPUT);

    digitalWrite(RELAY_PIN, LOW);
}

Route ON:

server.on("/relay/on", []() {
    digitalWrite(RELAY_PIN, HIGH);

    server.send(
        200,
        "text/plain",
        "Relay ON"
    );
});

Route OFF:

server.on("/relay/off", []() {
    digitalWrite(RELAY_PIN, LOW);

    server.send(
        200,
        "text/plain",
        "Relay OFF"
    );
});

Perhatikan bahwa beberapa modul relay memiliki logika active-low. Artinya, kondisi LOW dapat berarti relay ON. Selalu periksa spesifikasi modul yang digunakan sebelum menghubungkan beban listrik.

Membaca Sensor melalui Web Server

ESP32 tidak hanya dapat menerima perintah. ESP32 juga dapat mengirim data sensor ke browser.

Misalnya membaca analog input:

const int SENSOR_PIN = 34;

server.on("/sensor", []() {
    int value = analogRead(SENSOR_PIN);

    String json = "{";
    json += "\"value\":";
    json += value;
    json += "}";

    server.send(
        200,
        "application/json",
        json
    );
});

Browser dapat mengambil data tersebut secara berkala menggunakan JavaScript.

Polling Data Sensor

Contoh sederhana menggunakan setInterval():

setInterval(() => {
    fetch('/sensor')
        .then(response => response.json())
        .then(data => {
            document.getElementById('sensor').textContent =
                data.value;
        });
}, 2000);

Dengan cara tersebut, browser dapat meminta data sensor setiap dua detik.

Polling vs WebSocket

Polling cukup sederhana untuk prototype.

Namun, jika membutuhkan komunikasi real-time dengan frekuensi tinggi, WebSocket dapat menjadi pilihan yang lebih sesuai.

Metode	Kelebihan	Kekurangan
HTTP polling	Sederhana dan mudah dibuat.	Request berulang dapat menambah traffic.
WebSocket	Komunikasi dua arah dan lebih real-time.	Implementasi lebih kompleks.

ESP32 sebagai Access Point

Selain terhubung ke WiFi existing menggunakan mode station, ESP32 juga dapat membuat jaringan WiFi sendiri menggunakan mode Access Point.

Contoh konsep:

WiFi.softAP(
    "ESP32-Control",
    "password123"
);

ESP32 kemudian dapat menjadi access point untuk perangkat yang ingin terhubung langsung.

Phone
  |
  | WiFi
  v
ESP32 Access Point
  |
  v
Web Server
  |
  v
GPIO / Sensor

Mode ini berguna untuk prototype atau perangkat yang tidak membutuhkan koneksi ke router utama.

Station Mode vs Access Point Mode

Mode	Konsep	Contoh Penggunaan
Station	ESP32 terhubung ke router WiFi.	IoT dalam jaringan rumah atau kantor.
Access Point	ESP32 membuat jaringan WiFi sendiri.	Kontrol perangkat secara langsung.

Masalah ESP32 Tidak Bisa Diakses dari Browser

Beberapa masalah umum yang perlu diperiksa:

1. ESP32 Belum Terhubung ke WiFi

Periksa Serial Monitor dan pastikan status WiFi berhasil.

2. IP Address Salah

Gunakan IP address yang ditampilkan oleh WiFi.localIP().

3. Perangkat Berada di Jaringan Berbeda

Jika ESP32 berada pada jaringan lokal tertentu, browser harus memiliki jalur jaringan menuju ESP32.

4. WiFi Client Isolation

Beberapa router atau access point memiliki fitur client isolation yang mencegah perangkat wireless berkomunikasi satu sama lain.

5. Program Tidak Memanggil handleClient()

Pastikan:

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

dipanggil secara terus-menerus.

Masalah GPIO Tidak Bekerja

Jika tombol browser bekerja tetapi perangkat tidak berubah, periksa:

GPIO yang digunakan.
Konfigurasi pinMode().
Logika HIGH/LOW.
Koneksi kabel.
Resistor LED.
Spesifikasi modul relay.
Apakah GPIO tersebut aman digunakan pada board yang dipakai.

Jangan menganggap semua GPIO ESP32 memiliki karakteristik yang sama. Beberapa pin memiliki fungsi khusus atau batasan tertentu tergantung varian board ESP32.

Keamanan ESP32 Web Server

Contoh di atas cocok untuk pembelajaran dan jaringan lokal yang terkontrol. Namun, Web Server IoT yang digunakan dalam lingkungan production membutuhkan keamanan tambahan.

Jangan langsung mengekspos ESP32 ke internet hanya karena ESP32 memiliki HTTP server.

Beberapa hal yang perlu diperhatikan:

Gunakan jaringan yang aman.
Jangan menyimpan credential WiFi secara sembarangan.
Tambahkan authentication jika endpoint mengontrol perangkat penting.
Validasi input dari client.
Batasi akses jaringan ke perangkat.
Hindari membuka port ESP32 langsung ke internet.
Gunakan HTTPS atau gateway yang sesuai jika komunikasi membutuhkan keamanan transport.

Jangan Membuka Port ESP32 Langsung ke Internet

Untuk project rumahan, lebih aman membatasi ESP32 pada jaringan lokal daripada melakukan port forwarding router ke ESP32.

Arsitektur yang lebih aman untuk sistem yang membutuhkan akses remote biasanya menggunakan server atau gateway sebagai perantara.

Internet
   |
   v
Cloud / Backend
   |
   | Secure connection
   v
Home Network
   |
   v
ESP32
   |
   v
Device

Pendekatan tersebut memungkinkan authentication, authorization, logging, dan kontrol akses dilakukan pada layer yang lebih sesuai.

ESP32 Web Server vs IoT Cloud

Pendekatan	Kelebihan	Kekurangan
Local Web Server	Sederhana dan dapat bekerja tanpa cloud.	Akses biasanya terbatas pada jaringan lokal.
Cloud IoT	Dapat diakses dari internet dan mendukung integrasi lebih luas.	Lebih kompleks dan bergantung pada koneksi internet/infrastruktur.

Kapan Menggunakan ESP32 Web Server?

ESP32 Web Server cocok digunakan untuk:

Prototype smart home.
Kontrol lampu lokal.
Kontrol relay.
Monitoring sensor.
Konfigurasi perangkat IoT.
Dashboard perangkat lokal.
Project edukasi IoT.
Pengujian hardware.

Untuk sistem IoT berskala besar, biasanya diperlukan arsitektur yang lebih kompleks seperti MQTT, API backend, database, message broker, device authentication, dan monitoring.

Pengembangan Selanjutnya

Setelah berhasil membuat Web Server sederhana, project dapat dikembangkan dengan beberapa fitur berikut:

Kontrol beberapa GPIO.
Monitoring suhu dan kelembapan.
Dashboard dengan JavaScript.
AJAX atau Fetch API.
WebSocket untuk real-time update.
MQTT untuk komunikasi IoT.
Authentication.
OTA firmware update.
Logging.
Integrasi database melalui backend.

Contoh Arsitektur Project IoT yang Lebih Besar

                    Browser
                       |
                       | HTTPS
                       v
                +-------------+
                |   Backend   |
                |   Laravel   |
                +------+------+
                       |
                 MQTT / HTTP
                       |
                       v
                +-------------+
                |    ESP32    |
                +------+------+
                       |
          +------------+------------+
          |            |            |
          v            v            v
        Relay        Sensor        LED

Dalam arsitektur seperti ini, ESP32 tidak harus menjadi server yang langsung diakses browser. Backend dapat menjadi layer API dan authentication, sedangkan ESP32 berfungsi sebagai device.

Best Practice ESP32 Web Server

Pisahkan logic WiFi, HTTP handler, dan kontrol hardware jika project semakin besar.
Gunakan function handler untuk setiap endpoint.
Gunakan JSON untuk endpoint API.
Hindari blocking code yang terlalu lama di loop().
Gunakan timeout yang sesuai untuk koneksi jaringan.
Validasi data dari browser sebelum digunakan untuk hardware.
Jangan mengekspos Web Server langsung ke internet tanpa security layer.
Gunakan authentication untuk perangkat yang sensitif.
Pisahkan credential WiFi dari source code ketika project berkembang.
Gunakan architecture yang sesuai ketika jumlah device mulai bertambah.

Checklist Project ESP32 Web Server

ESP32 dapat terhubung ke WiFi.
IP address dapat diketahui melalui Serial Monitor.
HTTP server berhasil berjalan.
Route / dapat dibuka dari browser.
GPIO dapat dikontrol melalui endpoint.
HTML dapat ditampilkan dengan baik pada smartphone.
Endpoint status dapat mengembalikan data.
Perangkat berada pada jaringan yang dapat berkomunikasi dengan ESP32.
Access control diterapkan sebelum perangkat digunakan pada lingkungan yang tidak terpercaya.

Ringkasan

Komponen	Fungsi
`WiFi.h`	Menghubungkan ESP32 ke jaringan WiFi.
`WebServer.h`	Menyediakan HTTP Web Server sederhana.
`server.on()`	Mendaftarkan route atau endpoint.
`server.send()`	Mengirim HTTP response.
`server.handleClient()`	Memproses request client.
`digitalWrite()`	Mengontrol output GPIO.
`analogRead()`	Membaca input analog sesuai kemampuan GPIO/varian ESP32.

Kesimpulan

ESP32 Web Server merupakan cara yang sederhana dan menarik untuk menghubungkan perangkat IoT dengan browser. Dengan WiFi bawaan ESP32 dan library HTTP server, kita dapat membuat halaman web yang digunakan untuk mengontrol GPIO, membaca sensor, dan menampilkan status perangkat.

Konsep dasarnya cukup sederhana: ESP32 terhubung ke WiFi, menjalankan HTTP server, menyediakan beberapa endpoint, kemudian browser mengirim request untuk mengontrol atau membaca perangkat.

Dari contoh LED sederhana, konsep tersebut dapat dikembangkan menjadi dashboard IoT, kontrol relay, monitoring sensor, konfigurasi perangkat, hingga sistem IoT yang menggunakan backend dan MQTT.

Untuk prototype lokal, Web Server langsung pada ESP32 sudah cukup praktis. Namun, ketika sistem membutuhkan akses internet, banyak device, authentication, logging, dan kontrol terpusat, sebaiknya ESP32 ditempatkan sebagai device yang berkomunikasi dengan backend atau IoT platform melalui arsitektur yang lebih aman.