ESP32 tidak hanya berfungsi sebagai mikrokontroler untuk membaca sensor atau mengendalikan perangkat elektronik, tetapi juga mampu bertindak sebagai web server yang dapat diakses langsung melalui browser. Dengan memanfaatkan fitur WiFi bawaan, ESP32 dapat menyajikan halaman web sehingga pengguna dapat memonitor data maupun mengontrol perangkat tanpa memerlukan aplikasi tambahan. Pada tutorial ini, Anda akan mempelajari cara membuat Web Server Multiple Pages pada ESP32. Berbeda dengan web server sederhana yang hanya memiliki satu halaman, proyek ini memungkinkan ESP32 melayani beberapa halaman web secara bersamaan, seperti index.html, temperature.html, led.html, error_404.html, dan error_405.html.
Baca juga: ESP32 Web Server - Panduan Lengkap Membuat Web Server pada ESP32
Mengapa Menggunakan Web Server Multi-Halaman?
Pada proyek IoT yang lebih kompleks, satu halaman web sering kali tidak lagi cukup untuk menampilkan seluruh informasi maupun fitur yang dibutuhkan. Oleh karena itu, web server dengan banyak halaman menjadi solusi yang lebih baik karena setiap halaman dapat memiliki fungsi yang berbeda. Sebagai contoh:
- index.html digunakan sebagai halaman utama (Homepage).
- temperature.html digunakan untuk menampilkan data sensor suhu secara real-time.
- led.html digunakan untuk mengendalikan LED melalui browser.
- error_404.html ditampilkan ketika pengguna membuka halaman yang tidak tersedia.
- error_405.html digunakan ketika metode HTTP yang digunakan tidak diperbolehkan.
Dengan pendekatan ini, struktur program menjadi jauh lebih rapi, mudah dikembangkan, dan lebih menyerupai cara kerja sebuah website pada umumnya.
Fitur yang Akan Dibuat
Melalui tutorial ini, Anda akan membuat sebuah web server ESP32 dengan berbagai kemampuan berikut:
- Melayani beberapa halaman web secara bersamaan dalam satu web server.
- Setiap halaman memiliki file HTML tersendiri, sehingga struktur proyek menjadi lebih terorganisir.
- Menampilkan data sensor secara dinamis, sehingga informasi pada halaman web dapat diperbarui secara real-time.
- Mengontrol perangkat yang terhubung ke ESP32 melalui browser menggunakan parameter URL.
- Menangani HTTP Error, seperti 404 Not Found, ketika halaman yang diminta tidak tersedia.
- Memisahkan kode HTML dari program utama ESP32, sehingga proses pengembangan menjadi lebih mudah.
Meskipun terlihat cukup kompleks, sebenarnya konsep ini sangat mudah dipahami apabila dipelajari secara bertahap. Pada tutorial ini, seluruh proses dijelaskan langkah demi langkah sehingga cocok bagi pemula maupun pengguna yang ingin meningkatkan kemampuan membuat aplikasi berbasis web menggunakan ESP32.
Perangkat Keras yang Dibutuhkan
- ESP32 Dev Module ESP-WROOM-32 (38 Pin)
- Kabel Micro USB
Program ESP32 Web Server Multiple Pages (Versi Sederhana)
Sebagai tahap awal, kita akan menggunakan contoh program sederhana yang berisi beberapa halaman web. Pada contoh ini, seluruh kode HTML masih ditulis langsung (embedded) di dalam sketch Arduino sehingga lebih mudah dipahami. Meskipun cara ini cukup sederhana, seiring bertambahnya jumlah halaman dan kompleksitas tampilan, ukuran program akan menjadi semakin besar sehingga sulit untuk dikelola. Oleh karena itu, pada bagian selanjutnya Anda akan mempelajari cara memisahkan setiap halaman HTML ke dalam file tersendiri.
#include <DIYables_ESP32_WebServer.h>
#define LED_PIN 18 // ESP32 pin GPIO18 connected to LED
int LED_state = LOW;
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
}
// 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) {
Serial.println("Web Server: home page");
server.sendResponse(client, "This is the ESP32 home page");
}
void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("Web Server: temperature page");
float temperature = getTemperature();
String reponse = "Temperature: " + String(temperature);
server.sendResponse(client, reponse.c_str());
}
void handleLed(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("Web Server: LED page");
// Check for the 'state' parameter in the query string
String state = "";
for (int i = 0; i < params.count; i++) {
if (String(params.params[i].key) == "state") {
state = params.params[i].value;
if (state == "on") {
LED_state = HIGH;
} else if (state == "off") {
LED_state = LOW;
}
// control LED here
digitalWrite(LED_PIN, LED_state);
Serial.print(" => turning LED to ");
Serial.print(state);
Serial.println();
break;
}
}
String reponse = "LED state: " + String(LED_state);
server.sendResponse(client, reponse.c_str());
}
void handleNotFound(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
String response = "<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><title>404 Not Found</title></head><body>";
response += "<h1>404 - Page Not Found</h1>";
response += "<p>Sorry, we couldn't find that page!</p>";
response += "<a href=\"/\">Return to Home</a></body></html>";
server.sendResponse(client, response.c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
pinMode(LED_PIN, OUTPUT);
Serial.println("ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
server.addRoute("/temperature.html", handleTemperature);
server.addRoute("/led.html", handleLed);
// Set custom 404 handler
server.setNotFoundHandler(handleNotFound);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
Cara Menjalankan Program
Ikuti langkah-langkah berikut untuk mengunggah program ke papan ESP32:
1. Persiapkan Arduino IDE
Apabila ini adalah pertama kalinya Anda menggunakan ESP32, lakukan instalasi board ESP32 pada Arduino IDE terlebih dahulu. Pastikan board ESP32 telah muncul pada daftar board Arduino IDE.
2. Pilih Board dan Port
Buka Arduino IDE, kemudian pilih:
- Board: ESP32 Dev Module
- Port COM: Sesuaikan dengan port yang digunakan ESP32.
3. Instal Library yang Dibutuhkan
Program ini menggunakan library DIYables ESP32 WebServer.
Untuk menginstalnya:
- Buka menu Library Manager pada Arduino IDE.
- Cari library dengan kata kunci DIYables ESP32 WebServer
- Pilih library yang dikembangkan oleh DIYables.
- Klik tombol Install.
4. Salin Program
Salin kode program yang telah disediakan kemudian buka menggunakan Arduino IDE.
5. Ubah Konfigurasi WiFi
Sebelum mengunggah program, ubah informasi jaringan WiFi sesuai dengan jaringan yang digunakan.
const char* ssid = "Nama_WiFi";
const char* password = "Password_WiFi";
Pastikan ESP32 dan perangkat yang digunakan untuk mengakses web server berada pada jaringan WiFi yang sama.
6. Upload Program
Klik tombol Upload pada Arduino IDE, kemudian tunggu hingga proses kompilasi dan upload selesai.
7. Buka Serial Monitor
Setelah ESP32 berhasil dijalankan, buka Serial Monitor.
Beberapa detik kemudian akan muncul informasi alamat IP yang diperoleh ESP32 dari jaringan WiFi.
Contoh:
IP Address: 10.195.113.32
Alamat IP inilah yang nantinya digunakan untuk mengakses web server melalui browser.
Menguji Web Server ESP32
Setelah mengetahui alamat IP ESP32, buka browser pada komputer maupun smartphone yang masih berada pada jaringan WiFi yang sama. Kemudian akses beberapa alamat berikut:
1. 10.195.113.32
2. 10.195.113.32/index.html
3. 10.195.113.32/led.html
4. 10.195.113.32/led.html?state=on
5. 10.195.113.32/led.html?state=off
6. 10.195.113.32/temperature.html
7 . 10.195.113.32/blabla.html
Catatan: Gantilah alamat 10.195.113.32 dengan alamat IP yang ditampilkan pada Serial Monitor ESP32. Saat halaman-halaman tersebut dibuka, ESP32 akan memberikan respons sesuai URL yang diakses. Beberapa halaman yang akan muncul antara lain:
- Halaman utama (Home Page)
- Halaman kontrol LED
- Halaman monitoring suhu
- Halaman Error 404 (Not Found) apabila URL tidak tersedia
Selain itu, Anda juga dapat melihat aktivitas permintaan (request) yang diterima web server melalui Serial Monitor.
Mengapa HTML Perlu Dipisahkan dari Program ESP32?
Pada contoh sebelumnya, seluruh kode HTML ditulis langsung di dalam sketch Arduino. Cara tersebut memang sederhana, tetapi memiliki beberapa kelemahan, seperti:
- Program menjadi sangat panjang.
- Sulit mencari bagian HTML tertentu.
- Proses modifikasi tampilan menjadi lebih rumit.
- Struktur program menjadi kurang rapi.
Oleh karena itu, pendekatan yang lebih baik adalah memisahkan setiap halaman HTML ke dalam file header (.h) sehingga kode utama ESP32 hanya berisi logika program, sedangkan tampilan web berada pada file yang berbeda. Pendekatan ini membuat proyek lebih mudah dipelihara dan dikembangkan, terutama ketika jumlah halaman web semakin banyak.
Program ESP32 Web Server Multiple Pages
Berikut adalah langkah-langkah membuat proyek dengan memisahkan setiap halaman HTML ke dalam file tersendiri.
1. Buat Sketch Baru
Buka Arduino IDE, kemudian buat sketch baru dengan nama, misalnya:
esp32-web-server-multiple-pages.ino
Salin program utama ke dalam file tersebut.
#include <DIYables_ESP32_WebServer.h>
#include "index.h"
#include "temperature.h"
#include "led.h"
#include "error_404.h"
#define LED_PIN 18 // ESP32 pin GPIO18 connected to LED
int LED_state = LOW;
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
}
// 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) {
Serial.println("Web Server: home page");
server.sendResponse(client, HTML_CONTENT_HOME);
}
void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("Web Server: temperature page");
float temperature = getTemperature();
String html = HTML_CONTENT_TEMPERATURE; // Use the HTML content from the temperature.h file
html.replace("%TEMPERATURE_VALUE%", String(temperature)); // update the temperature value
server.sendResponse(client, html.c_str());
}
void handleLed(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("Web Server: LED page");
// Check for the 'state' parameter in the query string
String state = "";
for (int i = 0; i < params.count; i++) {
if (String(params.params[i].key) == "state") {
state = params.params[i].value;
if (state == "on") {
LED_state = HIGH;
} else if (state == "off") {
LED_state = LOW;
}
// control LED here
digitalWrite(LED_PIN, LED_state);
Serial.print(" => turning LED to ");
Serial.print(state);
Serial.println();
break;
}
}
String html = HTML_CONTENT_LED; // Use the HTML content from the led.h file
html.replace("%LED_STATE%", LED_state ? "ON" : "OFF"); // update the LED state
server.sendResponse(client, html.c_str());
}
void handleNotFound(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
// Handle 404 Not Found error
Serial.println("Web Server: Not Found");
// Use the HTML content from the error_404.h file
server.sendResponse(client, HTML_CONTENT_404);
}
void setup() {
Serial.begin(9600);
delay(1000);
pinMode(LED_PIN, OUTPUT);
Serial.println("ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
server.addRoute("/temperature.html", handleTemperature);
server.addRoute("/led.html", handleLed);
// Set custom 404 handler
server.setNotFoundHandler(handleNotFound);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
2. Atur Informasi WiFi
Ubah nilai SSID dan password sesuai jaringan WiFi yang digunakan.
3. Membuat File index.h
Tambahkan file baru pada Arduino IDE.
Caranya:
- Klik tombol New Tab yang berada di bawah ikon Serial Monitor, atau tekan Ctrl + Shift + N.
Masukkan nama file index.h. Kemudian klik OK.
Salin kode berikut ke dalam file index.h.
const char *HTML_CONTENT_HOME = R"=====(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:,">
<title>Home Page</title>
</head>
<body>
<h1>Welcome to the Home Page</h1>
<ul>
<li><a href="/led.html">LED Page</a></li>
<li><a href="/temperature.html">Temperature Page</a></li>
</ul>
</body>
</html>
)=====";
4. Membuat File led.h
Tambahkan file baru bernama led.h. Kemudian salin kode berikut:
const char *HTML_CONTENT_LED = R"=====(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:,">
<title>LED Page</title>
</head>
<body>
<h1>LED Page</h1>
<p>LED State: <span style="color: red;">%LED_STATE%</span></p>
<a href='/led.html?state=on'>Turn ON</a>
<br><br>
<a href='/led.html?state=off'>Turn OFF</a>
</body>
</html>
)=====";
5. Membuat File temperature.h
Tambahkan file temperature.h. Kemudian salin kode berikut:
const char *HTML_CONTENT_TEMPERATURE = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP32 - Web Temperature</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<meta charset="utf-8">
<link rel="icon" href="https://diyables.io/images/page/diyables.svg">
<style>
body { font-family: "Georgia"; text-align: center; font-size: width/2pt;}
h1 { font-weight: bold; font-size: width/2pt;}
h2 { font-weight: bold; font-size: width/2pt;}
button { font-weight: bold; font-size: width/2pt;}
</style>
<script>
var cvs_width = 200, cvs_height = 450;
function init() {
var canvas = document.getElementById("cvs");
canvas.width = cvs_width;
canvas.height = cvs_height + 50;
var ctx = canvas.getContext("2d");
ctx.translate(cvs_width/2, cvs_height - 80);
update_view(%TEMPERATURE_VALUE%);
}
function update_view(temp) {
var canvas = document.getElementById("cvs");
var ctx = canvas.getContext("2d");
var radius = 70;
var offset = 5;
var width = 45;
var height = 330;
ctx.clearRect(-cvs_width/2, -350, cvs_width, cvs_height);
ctx.strokeStyle="blue";
ctx.fillStyle="blue";
//5-step Degree
var x = -width/2;
ctx.lineWidth=2;
for (var i = 0; i <= 100; i+=5) {
var y = -(height - radius)*i/100 - radius - 5;
ctx.beginPath();
ctx.lineTo(x, y);
ctx.lineTo(x - 20, y);
ctx.stroke();
}
//20-step Degree
ctx.lineWidth=5;
for (var i = 0; i <= 100; i+=20) {
var y = -(height - radius)*i/100 - radius - 5;
ctx.beginPath();
ctx.lineTo(x, y);
ctx.lineTo(x - 25, y);
ctx.stroke();
ctx.font="20px Georgia";
ctx.textBaseline="middle";
ctx.textAlign="right";
ctx.fillText(i.toString(), x - 35, y);
}
// shape
ctx.lineWidth=16;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.rect(-width/2, -height, width, height);
ctx.stroke();
ctx.beginPath();
ctx.arc(0, -height, width/2, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillStyle="#e6e6ff";
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.rect(-width/2, -height, width, height);
ctx.fill();
ctx.beginPath();
ctx.arc(0, -height, width/2, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle="#ff1a1a";
ctx.beginPath();
ctx.arc(0, 0, radius - offset, 0, 2 * Math.PI);
ctx.fill();
temp = Math.round(temp * 100) / 100;
var y = (height - radius)*temp/100.0 + radius + 5;
ctx.beginPath();
ctx.rect(-width/2 + offset, -y, width - 2*offset, y);
ctx.fill();
ctx.fillStyle="red";
ctx.font="bold 34px Georgia";
ctx.textBaseline="middle";
ctx.textAlign="center";
ctx.fillText(temp.toString() + "°C", 0, 100);
}
window.onload = init;
</script>
</head>
<body>
<h1>ESP32 - Web Temperature</h1>
<canvas id="cvs"></canvas>
</body>
</html>
)=====";
6. Membuat File error_404.h
Tambahkan file error_404.h. Lalu salin kode berikut:
const char *HTML_CONTENT_404 = R"=====(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:,">
<title>404 - Page Not Found</title>
<style>
h1 {color: #ff4040;}
</style>
</head>
<body>
<h1>404</h1>
<p>Oops! The page you are looking for could not be found on Esp32 Web Server.</p>
<p>Please check the URL or go back to the <a href="/">homepage</a>.</p>
<p>Or check <a href="https://esp32io.com/tutorials/esp32-web-server-multiple-pages"> Esp32 Web Server</a> tutorial.</p>
</body>
</html>
)=====";
Struktur Proyek Arduino IDE
Setelah seluruh file selesai dibuat, struktur sketch pada Arduino IDE akan terlihat seperti berikut:
Dengan struktur seperti ini, setiap halaman web memiliki file masing-masing sehingga kode menjadi lebih bersih, rapi, dan mudah dikelola.
Mengunggah Program ke ESP32
1. Klik tombol Upload pada Arduino IDE untuk mengompilasi sekaligus mengunggah seluruh file program ke ESP32.
2. Setelah proses upload selesai, buka browser dan akses kembali alamat IP ESP32 seperti pada pengujian sebelumnya.
3. Anda akan melihat seluruh halaman web dapat diakses dengan baik, mulai dari halaman utama, halaman kontrol LED, halaman monitoring suhu, hingga halaman 404 Not Found apabila URL yang diminta tidak tersedia.
Baca juga: ESP32 Web Server dengan Login Username dan Password (HTTP Authentication)
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 Multiple Pages - Membuat Web Server ESP32 dengan Banyak Halaman Web"