Mengendalikan perangkat elektronik melalui web browser merupakan salah satu kemampuan yang membuat ESP32 sangat populer dalam pengembangan proyek Internet of Things (IoT). Dengan memanfaatkan fitur WiFi yang telah terintegrasi, ESP32 dapat berfungsi sebagai Web Server, sehingga Anda dapat mengontrol perangkat seperti LED langsung dari browser di komputer maupun smartphone tanpa memerlukan aplikasi tambahan. Pada tutorial ini, Anda akan mempelajari cara membuat Web Server ESP32 yang mampu mengontrol LED melalui halaman web sederhana. Selain itu, Anda juga akan mempelajari dua metode penyusunan kode HTML, yaitu dengan menyematkan HTML langsung ke dalam sketch Arduino dan memisahkan HTML ke dalam file terpisah agar program lebih rapi serta mudah dikembangkan.
Cara Kerja ESP32 sebagai Web Server untuk Mengontrol LED
Pada tutorial ini, ESP32 akan dikonfigurasi sebagai Web Server yang menerima permintaan (HTTP Request) dari browser. Setelah menerima permintaan tersebut, ESP32 akan memprosesnya, mengubah status LED sesuai perintah, kemudian mengirimkan kembali halaman web sebagai respons. Sebagai contoh, misalkan ESP32 memperoleh alamat IP 192.168.0.2 setelah berhasil terhubung ke jaringan WiFi. Alur kerjanya adalah sebagai berikut:
- Ketika Anda membuka alamat http://192.168.0.2 melalui browser, browser akan mengirimkan permintaan (request) ke ESP32. Selanjutnya ESP32 akan mengirimkan halaman web yang berisi tombol untuk mengendalikan LED.
- Saat tombol Turn ON ditekan, browser akan mengirimkan permintaan ke alamat:
http://10.252.6.32/LED1/on
Setelah menerima permintaan tersebut, ESP32 akan mengubah pin LED menjadi HIGH, sehingga LED menyala. Setelah itu halaman web diperbarui untuk menampilkan status LED terbaru.
- Sebaliknya, ketika tombol Turn OFF ditekan atau alamat berikut diakses:
http://10.252.6.32/LED1/off
ESP32 akan mengubah pin LED menjadi LOW, sehingga LED padam. Selanjutnya ESP32 mengirimkan respons ke browser agar tampilan halaman web menunjukkan kondisi LED yang telah berubah. Dengan konsep ini, browser berfungsi sebagai client, sedangkan ESP32 bertindak sebagai server yang menerima dan memproses setiap permintaan HTTP. Metode yang Dipelajari pada Tutorial Ini Tutorial ini membahas dua pendekatan dalam membuat halaman web pada ESP32, yaitu:
- Konten HTML disematkan langsung ke dalam sketch ESP32 (.ino).
- Konten HTML dipisahkan ke dalam file index.h sehingga struktur program menjadi lebih rapi.
Masing-masing metode memiliki kelebihan tersendiri. Metode pertama lebih sederhana dan cocok untuk belajar, sedangkan metode kedua lebih direkomendasikan untuk proyek yang memiliki tampilan web lebih kompleks.
Baca juga: DIYables ESP32 Web Apps Web Plotter - Cara Membuat Serial Plotter Berbasis Web pada ESP32
Pengembangan yang Dapat Dilakukan
Setelah memahami tutorial ini, Anda dapat mengembangkannya menjadi berbagai proyek IoT yang lebih menarik, misalnya:
- Mengontrol beberapa LED melalui satu halaman web.
- Mengontrol relay untuk menghidupkan atau mematikan peralatan listrik.
- Mendesain ulang tampilan User Interface (UI) menggunakan HTML dan CSS.
- Menambahkan JavaScript agar halaman web menjadi lebih interaktif.
- Mengontrol berbagai perangkat lain seperti servo, motor DC, buzzer, maupun sensor melalui browser.
Perangkat Keras yang Dibutuhkan
- Modul ESP32 Dev Module (ESP-WROOM-32) 38 Pin
- Kabel Micro USB
Metode 1: Konten HTML Disematkan ke dalam Sketch ESP32
Pada metode pertama ini, seluruh kode program, termasuk HTML, berada di dalam file sketch Arduino (.ino). Cara ini sangat cocok untuk mempelajari dasar pembuatan Web Server karena seluruh kode berada dalam satu file.
Langkah-langkah
1. Hubungkan ESP32 ke Komputer
Hubungkan board ESP32 ke komputer atau laptop menggunakan kabel Micro USB.
2. Buka Arduino IDE
Jalankan Arduino IDE yang telah terpasang pada komputer Anda.
3. Pilih Board dan Port
Pilih jenis board ESP32 yang digunakan, buka menu Tools → Board → ESP32 Arduino → ESP32 Dev Module. Kemudian pilih COM Port yang sesuai.
4. Install Library DIYables ESP32 WebServer
Buka Library Manager melalui Arduino IDE. Cari library DIYables ESP32 WebServer. Kemudian install library yang dikembangkan oleh DIYables.
5. Buat Sketch Baru
Buat sketch baru, misalnya dengan nama:
esp32-webserver.ino
Catatan: Pada artikel asli terdapat nama esp32-websokcet.ino. Nama tersebut kemungkinan merupakan kesalahan penulisan (typo). Anda dapat menggunakan nama yang lebih sesuai, misalnya esp32-webserver.ino.
6. Masukkan Program
Salin kode berikut ke dalam Arduino IDE.
#include <DIYables_ESP32_WebServer.h>
#define LED_PIN 18 // ESP32 pin GPIO18 connected to LED
int LED_state = LOW;
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
// Page handlers
String getHTML() {
String html = "<!DOCTYPE HTML>";
html += "<html>";
html += "<head>";
html += "<link rel='icon' href='data:,'>";
html += "</head>";
html += "<p>LED state: <span style='color: red;'>";
if (LED_state == LOW)
html += "OFF";
else
html += "ON";
html += "</span></p>";
html += "<a href='/led1/on'>Turn ON</a>";
html += "<br><br>";
html += "<a href='/led1/off'>Turn OFF</a>";
html += "</html>";
return html;
}
// home page
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("ESP32 Web Server: New request received");
server.sendResponse(client, getHTML().c_str());
}
void handleLedOn(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("ESP32 Web Server: New request received");
LED_state = HIGH;
digitalWrite(LED_PIN, LED_state);
server.sendResponse(client, getHTML().c_str());
}
void handleLedOff(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("ESP32 Web Server: New request received");
LED_state = LOW;
digitalWrite(LED_PIN, LED_state);
server.sendResponse(client, getHTML().c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
pinMode(LED_PIN, OUTPUT);
digitalWrite(LED_PIN, LED_state);
Serial.println("ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
server.addRoute("/led1/on", handleLedOn);
server.addRoute("/led1/off", handleLedOff);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
// Your code here
}
7. Konfigurasi WiFi
Ubah nilai SSID dan password pada program agar sesuai dengan jaringan WiFi yang akan digunakan.
8. Upload Program
Klik tombol Upload untuk mengunggah sketch ke board ESP32.
9. Buka Serial Monitor
Setelah proses upload selesai, buka Serial Monitor.
10. Periksa Alamat IP ESP32
Jika ESP32 berhasil terhubung ke jaringan WiFi, Serial Monitor akan menampilkan alamat IP, misalnya: 10.252.6.32. Alamat IP tersebut merupakan alamat Web Server ESP32 yang nantinya diakses melalui browser.
11. Akses Web Server ESP32
Buka browser pada komputer atau smartphone yang terhubung ke jaringan WiFi yang sama. Selanjutnya akses salah satu alamat berikut:
- http://10.252.6.32
- http://10.252.6.32//LED1/on
- http://10.252.6.32/LED1/off
Catatan: Alamat IP setiap ESP32 dapat berbeda-beda tergantung jaringan yang digunakan. Oleh karena itu, selalu gunakan alamat IP yang muncul pada Serial Monitor.
12. Amati Output pada Serial Monitor
Selain mengendalikan LED, Anda juga dapat melihat informasi permintaan HTTP yang diterima ESP32 melalui Serial Monitor.
13. Periksa Status LED
Setiap kali tombol Turn ON atau Turn OFF ditekan, LED akan berubah sesuai dengan perintah yang dikirim melalui browser.
14. Tampilan Halaman Web
Jika semua langkah dilakukan dengan benar, browser akan menampilkan halaman web seperti berikut.
Sekarang Anda dapat mengontrol LED secara langsung melalui halaman web tanpa perlu mengunggah ulang program.
Metode 2: Memisahkan Konten HTML ke dalam File index.h
Pada proyek Web Server yang lebih besar, halaman web biasanya terdiri dari banyak kode HTML, CSS, dan JavaScript. Jika seluruh kode tersebut ditempatkan di dalam file .ino, maka sketch akan menjadi sangat panjang dan sulit dipelajari. Karena itu, pendekatan yang lebih baik adalah memisahkan halaman web ke dalam file terpisah. Struktur file yang digunakan adalah sebagai berikut:
- esp32-webserver.ino → berisi program utama ESP32.
- index.h → berisi kode HTML, CSS, dan JavaScript.
Dengan cara ini, program menjadi lebih rapi, mudah dibaca, serta lebih mudah dikembangkan ketika halaman web semakin kompleks.
Langkah-langkah
1. Buat Sketch Baru
Buat sketch baru dengan nama:
esp32-webserver.ino
2. Salin Program Utama
Masukkan kode program berikut ke dalam sketch.
#include <DIYables_ESP32_WebServer.h>
#include "index.h" // Include the index.h file
#define LED_PIN 18 // ESP32 pin GPIO18 connected to LED
int LED_state = LOW;
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
// Page handlers
String getHTML() {
String html = webpage; // Use the HTML content from the index.h file
html.replace("%LED_STATE%", LED_state ? "ON" : "OFF"); // update the led state
return html;
}
// home page
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("ESP32 Web Server: New request received");
server.sendResponse(client, getHTML().c_str());
}
void handleLedOn(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("ESP32 Web Server: New request received");
LED_state = HIGH;
digitalWrite(LED_PIN, LED_state);
server.sendResponse(client, getHTML().c_str());
}
void handleLedOff(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("ESP32 Web Server: New request received");
LED_state = LOW;
digitalWrite(LED_PIN, LED_state);
server.sendResponse(client, getHTML().c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
pinMode(LED_PIN, OUTPUT);
digitalWrite(LED_PIN, LED_state);
Serial.println("ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
server.addRoute("/led1/on", handleLedOn);
server.addRoute("/led1/off", handleLedOff);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
// Your code here
}
3. Konfigurasi WiFi
Sesuaikan SSID dan password dengan jaringan WiFi yang digunakan.
4. Buat File index.h
Tambahkan file baru pada Arduino IDE dengan langkah berikut:
- Klik tombol New Tab yang berada di bawah ikon Serial Monitor, atau tekan Ctrl + Shift + N.
- Beri nama file index.h. Kemudian klik OK.
- Salin seluruh kode HTML berikut ke dalam file index.h.
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
<!DOCTYPE HTML>
<html>
<head>
<link rel='icon' href='data:,'>
</head>
<p>LED state: <span style='color: red;'>%LED_STATE%</span></p>
<a href='/led1/on'>Turn ON</a>
<br><br>
<a href='/led1/off'>Turn OFF</a>
</html>
)=====";
#endif
5. Pastikan Struktur Project
Setelah selesai, project akan memiliki dua file utama, yaitu:
- esp32-webserver.ino
- index.h
Dengan struktur seperti ini, pemisahan antara logika program dan tampilan web menjadi jauh lebih jelas sehingga proses pengembangan akan lebih mudah dilakukan.
6. Upload Program
Klik tombol Upload untuk mengunggah program ke ESP32.
7. Uji Web Server
Buka browser pada komputer maupun smartphone yang berada pada jaringan WiFi yang sama dengan ESP32. Masukkan alamat IP ESP32 seperti yang ditampilkan pada Serial Monitor. Jika seluruh konfigurasi telah dilakukan dengan benar, maka halaman web yang muncul akan memiliki fungsi yang sama seperti metode sebelumnya, yaitu dapat digunakan untuk menyalakan maupun mematikan LED melalui browser.
Baca juga: DIYables ESP32 Gmail - Cara Mengirim Email Menggunakan Gmail dengan ESP32
Dalam praktik, hasil dan kendala yang ditemui bisa berbeda tergantung perangkat, konfigurasi, versi library, dan sistem yang digunakan.
- Diskusi umum dan tanya jawab praktik: https://t.me/edukasielektronika
- Kendala spesifik dan kasus tertentu: http://bit.ly/Chatarduino
0 on: "DIYables ESP32 Web Server - Cara Mengontrol LED melalui Web Browser Menggunakan ESP32"