ESP32 tidak hanya dapat digunakan untuk membaca sensor atau mengendalikan perangkat elektronik, tetapi juga mampu berfungsi sebagai web server. Dengan memanfaatkan fitur WiFi yang sudah terintegrasi, ESP32 dapat meng-host sebuah halaman web yang dapat diakses melalui browser di komputer, laptop, maupun smartphone tanpa memerlukan perangkat server tambahan. Melalui web server ini, Anda dapat menampilkan data sensor secara real-time, mengontrol perangkat yang terhubung ke ESP32, hingga membuat antarmuka web interaktif menggunakan HTML, CSS, dan JavaScript. Pendekatan ini banyak digunakan dalam pengembangan Internet of Things (IoT) karena memudahkan proses monitoring dan kontrol perangkat melalui jaringan. Pada tutorial ini, pembahasan akan disusun secara bertahap agar lebih mudah dipahami, dimulai dari konsep paling dasar hingga pembuatan web server yang lebih kompleks.
Materi yang Akan Dipelajari
Beberapa topik yang akan dibahas pada tutorial ini meliputi:
- ESP32 Web Server – Menampilkan halaman web sederhana yang berisi teks.
- ESP32 Web Server – Menampilkan data sensor pada halaman web.
- ESP32 Web Server – Mengontrol perangkat melalui halaman web.
- ESP32 Web Server – Memisahkan kode HTML, CSS, dan JavaScript dari sketch Arduino agar struktur program lebih rapi.
- ESP32 Web Server – Membuat beberapa halaman web seperti index.html, temperature.html, led.html, error_404.html, error_405.html, dan halaman lainnya.
Baca juga: ESP32 HTTP Request - Panduan Lengkap Mengirim HTTP GET dan POST ke Web Server
Perangkat Keras yang Dibutuhkan
- ESP32 ESP-WROOM-32 Development Board (38 Pin)
- Kabel USB
Cara Kerja ESP32 Sebagai Web Server
Sebelum masuk ke tahap pemrograman, penting untuk memahami bagaimana ESP32 bekerja sebagai sebuah web server. Saat ESP32 berhasil terhubung ke jaringan WiFi, perangkat akan menjalankan layanan HTTP Server yang selalu menunggu permintaan (HTTP Request) dari web browser. Alur kerjanya secara umum adalah sebagai berikut:
1. ESP32 terhubung ke jaringan WiFi.
2. ESP32 menjalankan web server pada alamat IP tertentu.
3. Browser mengirimkan HTTP Request ke alamat IP tersebut.
4. ESP32 memproses permintaan yang diterima.
5. ESP32 mengirimkan HTTP Response yang berisi halaman web beserta data yang diminta.
6. Browser menampilkan halaman web kepada pengguna.
Secara teknis, setiap HTTP Response terdiri dari dua bagian utama, yaitu:
- HTTP Header, yaitu informasi mengenai jenis data yang dikirim, status respons, tipe konten, dan parameter lainnya.
- HTTP Body, yaitu isi halaman web yang akan ditampilkan pada browser, seperti HTML, CSS, JavaScript, maupun data sensor.
Membaca Nilai Sensor ESP32 Melalui Halaman Web
Pada contoh pertama, ESP32 akan dikonfigurasi sebagai web server yang menampilkan data sensor pada halaman web. Setiap kali browser mengakses alamat IP ESP32, perangkat akan membaca data sensor kemudian mengirimkan halaman HTML yang berisi nilai sensor tersebut kepada browser. Dengan demikian, pengguna dapat memantau kondisi sensor secara langsung tanpa memerlukan aplikasi tambahan. Program yang digunakan untuk menjalankan fungsi tersebut ditunjukkan pada bagian berikut:
#include <DIYables_ESP32_WebServer.h>
// 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
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, "<html><body><h1>Hello, ESP32!</h1></body></html>");
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
Persiapan Sebelum Upload Program
Sebelum mengunggah program ke ESP32, lakukan beberapa langkah berikut:
1. Pastikan Arduino IDE telah dikonfigurasi agar mendukung board ESP32.
2. Hubungkan board ESP32 ke komputer menggunakan kabel USB.
3. Jalankan Arduino IDE.
4. Pilih board yang sesuai, misalnya ESP32 Dev Module.
5. Pilih Port COM yang digunakan oleh ESP32.
6. Buka menu Sketch → Include Library → Manage Libraries atau klik ikon Library Manager.
7. Cari library DIYables ESP32 WebServer.
8. Klik Install dan tunggu hingga proses instalasi selesai.
Mengunggah Program ke ESP32
Setelah seluruh persiapan selesai dilakukan, ikuti langkah berikut:
1. Salin seluruh kode program di atas ke Arduino IDE.
2. Ganti informasi SSID dan Password WiFi sesuai jaringan yang digunakan.
3. Klik tombol Upload untuk mengunggah program ke ESP32.
4. Setelah proses upload selesai, buka Serial Monitor.
Apabila ESP32 berhasil terhubung ke jaringan WiFi, Serial Monitor akan menampilkan alamat IP yang diperoleh dari router. Langkah selanjutnya:
1. Catat alamat IP tersebut.
2. Masukkan alamat IP ke bilah alamat browser pada komputer atau smartphone yang berada pada jaringan WiFi yang sama.
3. Tekan Enter.
Pada Serial Monitor akan terlihat bahwa browser telah mengirimkan permintaan (HTTP Request) ke ESP32.
Browser kemudian akan menampilkan halaman web sederhana yang berisi tulisan:
Hello, ESP32!
Tampilan halaman web kurang lebih seperti berikut:
Menampilkan Nilai Sensor pada Halaman Web
Selain menampilkan teks sederhana, ESP32 juga dapat mengirimkan data sensor secara langsung ke browser. Pada contoh berikut, ESP32 akan membaca nilai suhu kemudian menampilkan hasil pembacaan tersebut pada halaman web setiap kali browser melakukan akses ke alamat IP ESP32.
#include <DIYables_ESP32_WebServer.h>
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
// get temperature from sensor
float temperature = getTemperature();
// Format the temperature with two decimal places
String temperatureStr = String(temperature, 2);
String html = "<!DOCTYPE HTML>";
html += "<html>";
html += "<head>";
html += "<link rel=\"icon\" href=\"data:,\">";
html += "</head>";
html += "<p>";
html += "Temperature: <span style=\"color: red;\">";
html += temperature;
html += "°C</span>";
html += "</p>";
html += "</html>";
server.sendResponse(client, html.c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
Langkah Pengujian
Lakukan pengujian menggunakan langkah-langkah berikut:
1. Salin seluruh kode program ke Arduino IDE.
2. Ubah konfigurasi SSID dan Password WiFi sesuai jaringan yang digunakan.
3. Kompilasi program.
4. Upload program ke board ESP32.
5. Tunggu hingga ESP32 berhasil terhubung ke jaringan WiFi.
6. Buka Serial Monitor dan catat alamat IP yang muncul.
7. Masukkan alamat IP tersebut ke browser.
Jika seluruh langkah dilakukan dengan benar, browser akan menampilkan halaman web yang berisi informasi dari ESP32, misalnya nilai suhu seperti ilustrasi berikut:
Catatan: Tampilan halaman web pada contoh ini masih sangat sederhana. Pada bagian akhir tutorial akan dijelaskan cara membuat antarmuka (User Interface/UI) yang lebih menarik menggunakan HTML, CSS, dan JavaScript.
Mengontrol ESP32 Melalui Halaman Web
Selain digunakan untuk menampilkan informasi, web server pada ESP32 juga dapat digunakan untuk mengontrol perangkat elektronik yang terhubung ke board, seperti LED, relay, motor, maupun aktuator lainnya. Proses ini sedikit lebih kompleks dibandingkan hanya menampilkan data sensor. Ketika pengguna menekan tombol atau mengakses URL tertentu pada halaman web, browser akan mengirimkan HTTP Request ke ESP32. ESP32 kemudian akan menganalisis isi request tersebut untuk menentukan tindakan yang harus dilakukan, misalnya:
- Menyalakan LED.
- Mematikan LED.
- Mengaktifkan relay.
- Mengubah mode operasi perangkat.
- Menjalankan fungsi tertentu sesuai program.
Dengan mekanisme tersebut, halaman web dapat berfungsi sebagai panel kontrol (control panel) yang memungkinkan pengguna mengendalikan perangkat IoT dari browser.
Memisahkan Konten HTML ke File Terpisah di Arduino IDE
Pada contoh-contoh sederhana, kode HTML biasanya ditulis langsung di dalam sketch Arduino (.ino). Cara ini cukup praktis jika halaman web hanya terdiri dari beberapa baris kode. Namun, ketika aplikasi mulai berkembang dan halaman web menggunakan HTML, CSS, serta JavaScript dalam jumlah besar, menuliskan seluruh kode tersebut di dalam file .ino akan membuat program sulit dibaca dan dipelihara. Karena itu, pendekatan yang lebih baik adalah memisahkan kode antarmuka web ke dalam file tersendiri. Struktur proyek nantinya akan terdiri dari dua bagian:
- File .ino berisi seluruh program utama ESP32.
- File .h berisi kode HTML, CSS, dan JavaScript yang akan dikirimkan ke browser.
Dengan struktur ini, kode menjadi lebih rapi, mudah dikembangkan, serta lebih mudah dipelihara ketika aplikasi semakin kompleks. Secara umum, proses pembuatannya terdiri dari dua tahap:
1. Menyiapkan Halaman HTML
Sebelum membuat program ESP32, siapkan terlebih dahulu tampilan halaman web. Langkah-langkahnya sebagai berikut:
- Buat file HTML pada komputer menggunakan editor teks favorit Anda.
- Rancang tampilan antarmuka menggunakan HTML, CSS, dan JavaScript.
- Pada bagian yang nantinya akan menampilkan data dari ESP32, gunakan placeholder sebagai data sementara.
- Buka file HTML menggunakan browser untuk memastikan tampilan sudah sesuai.
- Setelah selesai, salin seluruh isi file HTML ke dalam file .h yang akan digunakan pada Arduino IDE.
Pendekatan ini memudahkan proses desain karena tampilan dapat diuji terlebih dahulu tanpa harus melakukan upload program ke ESP32 setiap kali melakukan perubahan.
2. Membuat Program ESP32
Setelah halaman HTML selesai dibuat, langkah berikutnya adalah membuat sketch ESP32:
- Jalankan Arduino IDE.
- Buat sketch baru.
- Simpan sketch, misalnya dengan nama esp32-web-server.ino.
- Salin kode program dari tutorial ini ke dalam sketch tersebut.
#include <DIYables_ESP32_WebServer.h>
#include "index.h"
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, webpage);
}
void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
float temperature = getTemperature();
// Format the temperature with two decimal places
String temperatureStr = String(temperature, 2);
server.sendResponse(client, temperatureStr.c_str(), "text/plain");
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
server.addRoute("/temperature", handleTemperature);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
Selanjutnya:
- Ubah informasi SSID dan Password WiFi sesuai jaringan yang digunakan.
Kemudian buat file index.h melalui Arduino IDE:
- Klik tombol New Tab yang berada di bawah ikon Serial Monitor, atau tekan Ctrl + Shift + N.
- Beri nama file index.h, kemudian klik OK.
Selanjutnya:
- Salin kode berikut ke dalam file index.h.
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
REPLACE_YOUR_HTML_CONTENT_HERE
)=====";
#endif
Setelah itu, ganti baris REPLACE_YOUR_HTML_CONTENT_HERE dengan seluruh isi file HTML yang telah Anda buat sebelumnya. Tidak masalah jika kode HTML terdiri dari banyak baris karena seluruh kontennya akan disimpan di dalam file index.h. Contoh isi file index.h ditunjukkan pada bagian berikut:
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP32 Temperature</title>
</head>
<body>
<h1>ESP32 Temperature</h1>
<p>Temperature: <span style="color: red;"><span id="temperature">Loading...</span> ℃</span></p>
<script>
function fetchTemperature() {
fetch("/temperature")
.then(response => response.text())
.then(data => {
document.getElementById("temperature").textContent = data;
});
}
fetchTemperature();
setInterval(fetchTemperature, 4000); // Update temperature every 4 seconds
</script>
</body>
</html>
)=====";
#endif
Pada tahap ini, proyek Arduino telah memiliki dua file utama, yaitu:
- esp32-web-server.ino sebagai program utama ESP32.
- index.h sebagai penyimpan halaman web.
Terakhir, klik tombol Upload untuk mengunggah program ke board ESP32.
Setelah proses upload selesai, buka browser kemudian akses alamat IP ESP32 seperti pada langkah sebelumnya. Apabila seluruh proses berhasil dilakukan, halaman web akan tampil seperti ilustrasi berikut:
Baca juga: ESP32 Modbus - Pengertian, Fungsi, dan Cara Kerja Protokol Modbus
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: "ESP32 Web Server - Panduan Lengkap Membuat Web Server pada ESP32"