ESP32, penerus ESP8266 yang baru-baru ini dirilis, jadi idola baru di dunia proyek IoT dan WiFi. Modul WiFi yang murah ini bisa diprogram buat jalanin server web sendiri, dan kerennya, nggak perlu ribet! Seru banget, kan?
Di tutorial ini, Kita bakal ngajak Kamu buat bikin server web sederhana pake ESP32 di Arduino IDE. Jadi, yuk langsung aja kita mulai!
Ngomong-ngomong, Kamu tau nggak sih, apa itu server web dan gimana cara kerjanya?
Server web itu semacam tempat “nongkrongnya” halaman web. Di situ, data halaman disimpan, diproses, terus dikirim ke klien web. Klien web ini ya browser yang biasa kita pake di HP atau komputer. Nah, mereka ngobrol pake protokol yang namanya Hypertext Transfer Protocol alias HTTP. Simple, kan
Dalam protokol HTTP, yang mulai duluan itu klien. Jadi, klien bakal ngirim permintaan buat ngakses halaman web tertentu. Kalau semuanya lancar, server bakal balikin isi halaman itu. Tapi kalau ada yang salah, server bisa balikin pesan error, kayak si “404 Not Found” yang legendaris itu.
Mode Operasi ESP32
Salah satu fitur paling keren dari ESP32 adalah kemampuannya nggak cuma nyambung ke WiFi yang udah ada dan jadi server web, tapi juga bisa bikin jaringan WiFi-nya sendiri! Jadi, perangkat lain bisa langsung konek ke jaringan itu dan ngakses halaman web-nya. Ini karena ESP32 punya tiga mode operasi: Station (STA), Soft Access Point (AP), atau malah dua-duanya sekaligus.
Mode Station (STA)
Di mode Station (STA), ESP32 bakal nyambung ke jaringan WiFi yang udah ada, alias jaringan yang biasanya dibuat sama router di rumah atau kantor lo. Jadi, ESP32-nya ikut nimbrung di jaringan yang sama.
Mode Station (STA)
Di mode STA, ESP32 bakal dapet alamat IP dari router WiFi yang terkoneksi. Nah, dengan alamat IP ini, ESP32 bisa jadi server web dan nyajiin halaman web buat semua perangkat yang konek ke jaringan WiFi tersebut. Simpel banget, kan?
Mode Soft Access Point (AP)
Kalau di mode Soft Access Point (AP), ESP32 bikin jaringan WiFi-nya sendiri dan jadi kayak “router mini”. Perangkat lain bisa langsung konek ke jaringan ini, kayak nebeng hotspot. Tapi, nggak kayak router biasa, ESP32 ini nggak terhubung ke jaringan kabel. Makanya, ini disebut Soft Access Point (soft-AP). Oh iya, maksimal cuma bisa lima perangkat aja yang konek barengan, ya. Jadi jangan kaget kalau nggak bisa lebih.
Mode AP
Di mode AP, ESP32 bakal bikin jaringan WiFi baru lengkap sama SSID (nama jaringan) dan alamat IP-nya. Dengan alamat IP ini, ESP32 bisa nyajiin halaman web buat semua perangkat yang konek ke jaringan ini. Jadi, ESP32 jadi pusatnya!
Nyambungin LED ke ESP32
Sekarang, setelah paham dasar-dasarnya soal server web dan mode yang bisa dipakai di ESP32, yuk kita lanjut ke tahap seru: nyambungin beberapa LED ke ESP32 buat dikontrol lewat WiFi.
Pertama, pasang ESP32 di breadboard, pastikan kaki-kakinya ada di sisi yang beda, biar gampang disambungin. Terus, ambil dua LED dan sambungin ke GPIO 4 dan 5, jangan lupa pake resistor pembatas arus 220Ω biar LED-nya aman.
Kalau udah selesai, hasilnya bakal mirip kayak gambar di bawah.
Ide Mengontrol dengan Server Web ESP32
Mungkin kamu mikir, “Gimana caranya ESP32 yang cuma proses dan sajikan halaman web bisa ngontrol sesuatu?”
Jawabannya simpel banget! Kita bakal ngontrol berbagai hal dengan cara akses URL tertentu.
Pas kamu ketik URL di browser, browser bakal kirim permintaan HTTP (alias GET request) ke server web. Tugas server web di ESP32 ini adalah nangkep permintaan itu dan ngasih respon yang sesuai.
Contohnya, kamu masukin URL kayak:http://192.168.1.1/ledon
Browser bakal kirim permintaan HTTP ke ESP32. Begitu ESP32 nerima permintaan itu, dia tau kamu mau nyalain LED. Jadi, dia bakal nyalain LED dan ngirim halaman web yang ngasih tau status LED-nya sekarang “hidup”. Simpel banget, kan?
Contoh 1 – Bikin Server Web ESP32 di Mode Access Point (AP)
Sekarang bagian serunya nih! Di contoh ini, kita bakal bikin server web ESP32 jalan di mode Access Point (AP). Jadi, ESP32 bikin jaringan WiFi sendiri dan bisa sajikan halaman web buat perangkat apa aja yang konek ke jaringan itu.
Langkah pertama, sambungin ESP32 ke komputer kamu, terus upload sketsa-nya. Abis itu, kita bisa lihat lebih detail gimana hasilnya.
#include <WiFi.h>
#include <WebServer.h>
/* Put your SSID & Password */
const char* ssid = "ESP32"; // Enter SSID here
const char* password = "12345678"; //Enter Password here
/* Put IP Address details */
IPAddress local_ip(192,168,1,1);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);
WebServer server(80);
uint8_t LED1pin = 4;
bool LED1status = LOW;
uint8_t LED2pin = 5;
bool LED2status = LOW;
void setup() {
Serial.begin(115200);
pinMode(LED1pin, OUTPUT);
pinMode(LED2pin, OUTPUT);
WiFi.softAP(ssid, password);
WiFi.softAPConfig(local_ip, gateway, subnet);
delay(100);
server.on("/", handle_OnConnect);
server.on("/led1on", handle_led1on);
server.on("/led1off", handle_led1off);
server.on("/led2on", handle_led2on);
server.on("/led2off", handle_led2off);
server.onNotFound(handle_NotFound);
server.begin();
Serial.println("HTTP server started");
}
void loop() {
server.handleClient();
if(LED1status)
{digitalWrite(LED1pin, HIGH);}
else
{digitalWrite(LED1pin, LOW);}
if(LED2status)
{digitalWrite(LED2pin, HIGH);}
else
{digitalWrite(LED2pin, LOW);}
}
void handle_OnConnect() {
LED1status = LOW;
LED2status = LOW;
Serial.println("GPIO4 Status: OFF | GPIO5 Status: OFF");
server.send(200, "text/html", SendHTML(LED1status,LED2status));
}
void handle_led1on() {
LED1status = HIGH;
Serial.println("GPIO4 Status: ON");
server.send(200, "text/html", SendHTML(true,LED2status));
}
void handle_led1off() {
LED1status = LOW;
Serial.println("GPIO4 Status: OFF");
server.send(200, "text/html", SendHTML(false,LED2status));
}
void handle_led2on() {
LED2status = HIGH;
Serial.println("GPIO5 Status: ON");
server.send(200, "text/html", SendHTML(LED1status,true));
}
void handle_led2off() {
LED2status = LOW;
Serial.println("GPIO5 Status: OFF");
server.send(200, "text/html", SendHTML(LED1status,false));
}
void handle_NotFound(){
server.send(404, "text/plain", "Not found");
}
String SendHTML(uint8_t led1stat,uint8_t led2stat){
String ptr = "<!DOCTYPE html> <html>\n";
ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr +="<title>LED Control</title>\n";
ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
ptr +=".button {display: block;width: 80px;background-color: #3498db;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
ptr +=".button-on {background-color: #3498db;}\n";
ptr +=".button-on:active {background-color: #2980b9;}\n";
ptr +=".button-off {background-color: #34495e;}\n";
ptr +=".button-off:active {background-color: #2c3e50;}\n";
ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
ptr +="</style>\n";
ptr +="</head>\n";
ptr +="<body>\n";
ptr +="<h1>ESP32 Web Server</h1>\n";
ptr +="<h3>Using Access Point(AP) Mode</h3>\n";
if(led1stat)
{ptr +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";}
else
{ptr +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";}
if(led2stat)
{ptr +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";}
else
{ptr +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";}
ptr +="</body>\n";
ptr +="</html>\n";
return ptr;
}Akses Server Web di Mode AP
Setelah sketsa selesai di-upload, buka Serial Monitor dengan baud rate 115200, terus tekan tombol RESET di ESP32. Kalau semua lancar, bakal muncul pesan “Server HTTP dimulai”. Sip, berarti server web-nya udah jalan!
Sekarang ambil HP, laptop, atau perangkat apa aja yang bisa konek ke WiFi, terus cari jaringan dengan nama “ESP32”. Tinggal konekin aja pake password 12345678.
Kalau udah konek ke jaringan ESP32 AP, buka browser dan masukin alamat 192.168.1.1. Nanti ESP32 bakal nampilin halaman web yang ngasih tau status LED dan tombol yang ada. Sambil jalan, kamu juga bisa cek Serial Monitor buat lihat status pin GPIO ESP32.
Sekarang, sambil pantau URL-nya, klik tombol buat nyalain LED1. Begitu tombolnya diklik, ESP32 bakal nerima permintaan buat URL /led1on, terus nyalain LED1. Halaman web juga bakal diperbarui buat nunjukin status LED yang baru. Di sisi lain, status pin GPIO juga bakal tercetak di Serial Monitor.
Kamu bisa coba tombol LED2 juga buat ngecek apakah kerjanya sama, loh.
Sekarang, mari kita bahas kodenya lebih detail, biar kamu ngerti gimana cara kerjanya dan bisa ubah sesuai kebutuhan kamu.
Penjelasan Kode
Sketsa dimulai dengan ngimpor WiFi.h, yang berisi metode khusus buat ESP32 nyambung ke jaringan. Terus, kita juga ngimpor WebServer.h, yang punya beberapa metode buat bantu kita setup server dan ngatur permintaan HTTP yang masuk, jadi nggak perlu ribet mikirin detail implementasi tingkat rendah.
#include <WiFi.h>
#include <WebServer.h>Karena kita nyetting web server ESP32 di mode Access Point (AP), jadi ESP32 bakal bikin jaringan WiFi-nya sendiri. Nah, kita perlu atur beberapa hal kayak SSID, password, alamat IP, subnet mask IP, dan gateway IP biar semuanya bisa jalan lancar.
/* Put your SSID & Password */
const char* ssid = "ESP32"; // Enter SSID here
const char* password = "12345678"; //Enter Password here
/* Put IP Address details */
IPAddress local_ip(192,168,1,1);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);Setelah itu, kita buat objek dari perpustakaan WebServer supaya bisa pake fungsinya. Konstruktor objek ini butuh parameter buat port yang bakal didengerin server. Karena port 80 itu default untuk HTTP, kita pake port ini. Dengan gitu, kita nggak perlu nentuin port di URL buat konek ke server.
// declare an object of WebServer library
WebServer server(80);Selanjutnya, kami mendeklarasikan pin GPIO ESP32 yang terhubung dengan LED, serta status awalnya.
uint8_t LED1pin = 4;
bool LED1status = LOW;
uint8_t LED2pin = 5;
bool LED2status = LOW;Di dalam fungsi setup(), kita nyetting ESP32 Web Server di mode Soft Access Point (AP). Pertama-tama, kita buat koneksi serial buat keperluan debugging, terus kita atur pin GPIO biar bisa berfungsi sebagai OUTPUT.
Serial.begin(115200);
pinMode(LED1pin, OUTPUT);
pinMode(LED2pin, OUTPUT);Kemudian, kami mengkonfigurasi soft access point untuk membuat jaringan Wi-Fi dengan memberikan SSID, kata sandi, alamat IP, subnet mask IP, dan gateway IP.
WiFi.softAP(ssid, password);
WiFi.softAPConfig(local_ip, gateway, subnet);
delay(100);Buat nangani permintaan HTTP yang masuk, kita perlu tentuin kode mana yang bakal dieksekusi pas URL tertentu diakses. Caranya, kita pake metode .on(), yang butuh dua parameter: jalur URL relatif dan nama fungsi yang bakal dijalanin pas URL itu dibuka.
Misalnya, di baris pertama kode di bawah ini, kita kasih tau kalau server nerima permintaan HTTP di jalur root (/), server bakal manggil fungsi handle_OnConnect(). Yang penting, URL yang kita tulis itu jalur relatif, ya.
Terus, kita juga perlu tentuin empat URL lainnya buat nangani dua status dari dua LED.
server.on("/", handle_OnConnect);
server.on("/led1on", handle_led1on);
server.on("/led1off", handle_led1off);
server.on("/led2on", handle_led2on);
server.on("/led2off", handle_led2off);Kita belum nyetting server buat nangani URL yang nggak ada di daftar yang udah kita tentuin pake server.on(). Jadi, kalau ada klien yang minta URL yang nggak dikenal, seharusnya server balikin error 404 (Page Not Found). Nah, buat ngatur ini, kita pake metode server.onNotFound().
server.onNotFound(handle_NotFound);Sekarang, untuk memulai server, kita memanggil metode begin() method.
server.begin();
Serial.println("HTTP server started");Di dalam fungsi loop(), permintaan HTTP yang masuk sebenarnya ditangani di sini. Caranya, kita pake metode handleClient() dari objek server. Di sini juga, kita bisa ubah status LED sesuai dengan permintaan yang diterima.
void loop() {
server.handleClient();
if(LED1status)
{digitalWrite(LED1pin, HIGH);}
else
{digitalWrite(LED1pin, LOW);}
if(LED2status)
{digitalWrite(LED2pin, HIGH);}
else
{digitalWrite(LED2pin, LOW);}
}Sekarang, kita perlu nulis fungsi handle_OnConnect(), yang sebelumnya udah kita sambungin ke URL root (/) pake server.on(). Di awal fungsi ini, kita set status kedua LED ke LOW (keadaan awal LED) dan cetak statusnya di Serial Monitor.
Buat ngebales permintaan HTTP, kita pake metode send(). Metode ini bisa dipanggil dengan berbagai argumen, tapi yang paling simpel, kita butuh kode respons HTTP, tipe konten, dan isi kontennya.
Parameter pertama yang kita kirim ke metode send() adalah kode 200 (kode status HTTP), yang artinya permintaan sukses dan OK. Lalu, kita tentuin tipe kontennya sebagai “text/html”, dan terakhir kita panggil fungsi custom SendHTML(), yang bakal ngehasilin halaman HTML dinamis dengan status LED-nya.
void handle_OnConnect() {
LED1status = LOW;
LED2status = LOW;
Serial.println("GPIO4 Status: OFF | GPIO5 Status: OFF");
server.send(200, "text/html", SendHTML(LED1status,LED2status));
}Begitu juga, kita nulis lima fungsi lagi buat nangani permintaan LED ON/OFF dan halaman 404 Error kalau URL yang diminta nggak ada.
void handle_led1on() {
LED1status = HIGH;
Serial.println("GPIO4 Status: ON");
server.send(200, "text/html", SendHTML(true,LED2status));
}
void handle_led1off() {
LED1status = LOW;
Serial.println("GPIO4 Status: OFF");
server.send(200, "text/html", SendHTML(false,LED2status));
}
void handle_led2on() {
LED2status = HIGH;
Serial.println("GPIO5 Status: ON");
server.send(200, "text/html", SendHTML(LED1status,true));
}
void handle_led2off() {
LED2status = LOW;
Serial.println("GPIO5 Status: OFF");
server.send(200, "text/html", SendHTML(LED1status,false));
}
void handle_NotFound(){
server.send(404, "text/plain", "Not found");
}Setiap kali server web ESP32 nerima permintaan dari klien, fungsi sendHTML() bakal bikin halaman web. Caranya, dia cuma gabungin kode HTML jadi satu string panjang dan balikin ke fungsi server.send() yang udah kita bahas sebelumnya. Fungsi ini bakal pake status LED sebagai parameter buat bikin konten HTML secara dinamis.
Hal pertama yang harus selalu dikirim adalah deklarasi <!DOCTYPE>, yang nunjukin kalau kita lagi kirim kode HTML.
String SendHTML(uint8_t led1stat,uint8_t led2stat){
String ptr = "<!DOCTYPE html> <html>\n";Elemen viewport <meta> bikin halaman web jadi responsif, jadi tampilannya tetap oke di berbagai perangkat. Sedangkan tag judul buat nentuin judul halaman webnya.
ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr +="<title>LED Control</title>\n";Setelah itu, kita pakai sedikit CSS buat ngerapiin tombol dan tampilan halaman web secara keseluruhan. Kita pilih font Helvetica dan atur kontennya biar tampil sebagai blok sebaris dan rata tengah.
ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";Kode berikutnya kemudian mengatur warna, font, dan margin di sekitar badan, tag H1, H3, dan p.
ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";Tombol-tombolnya juga ditata dengan properti seperti warna, ukuran, margin, dan sebagainya. Pemilih :active mengubah tampilan tombol ketika sedang diklik.
ptr +=".button {display: block;width: 80px;background-color: #3498db;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
ptr +=".button-on {background-color: #3498db;}\n";
ptr +=".button-on:active {background-color: #2980b9;}\n";
ptr +=".button-off {background-color: #34495e;}\n";
ptr +=".button-off:active {background-color: #2c3e50;}\n";Mengatur Judul Halaman Web
Selanjutnya, judul halaman web diatur. Anda dapat mengubah teks ini menjadi apa pun yang sesuai dengan aplikasi Kamu.
ptr +="<h1>ESP32 Web Server</h1>\n";
ptr +="<h3>Using Access Point(AP) Mode</h3>\n";Menampilkan Tombol dan Status Terkait
Pernyataan if digunakan untuk memperbarui status tombol dan LED secara dinamis.
if(led1stat)
{ptr +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";}
else
{ptr +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";}
if(led2stat)
{ptr +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";}
else
{ptr +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";}Contoh 2 – Nyetting Server Web ESP32 di Mode WiFi Station (STA)
Sekarang, kita beralih ke contoh berikutnya yang bakal nunjukin cara nyetting server web ESP32 di mode Station (STA), biar bisa nyajikan halaman web ke klien yang terhubung ke jaringan yang ada.
Sebelum upload sketsa, pastikan lo ubah beberapa bagian supaya sketsanya bisa jalan dengan baik. Buat nyambungin ESP32 ke jaringan yang ada, lo perlu ganti dua variabel berikut pake kredensial jaringan kamu.
Setelah selesai, lanjutkan dan coba sketsanya.
#include <WiFi.h>
#include <WebServer.h>
/*Put your SSID & Password*/
const char* ssid = " YourNetworkName"; // Enter SSID here
const char* password = " YourPassword"; //Enter Password here
WebServer server(80);
uint8_t LED1pin = 4;
bool LED1status = LOW;
uint8_t LED2pin = 5;
bool LED2status = LOW;
void setup() {
Serial.begin(115200);
delay(100);
pinMode(LED1pin, OUTPUT);
pinMode(LED2pin, OUTPUT);
Serial.println("Connecting to ");
Serial.println(ssid);
//connect to your local wi-fi network
WiFi.begin(ssid, password);
//check wi-fi is connected to wi-fi network
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected..!");
Serial.print("Got IP: "); Serial.println(WiFi.localIP());
server.on("/", handle_OnConnect);
server.on("/led1on", handle_led1on);
server.on("/led1off", handle_led1off);
server.on("/led2on", handle_led2on);
server.on("/led2off", handle_led2off);
server.onNotFound(handle_NotFound);
server.begin();
Serial.println("HTTP server started");
}
void loop() {
server.handleClient();
if(LED1status)
{digitalWrite(LED1pin, HIGH);}
else
{digitalWrite(LED1pin, LOW);}
if(LED2status)
{digitalWrite(LED2pin, HIGH);}
else
{digitalWrite(LED2pin, LOW);}
}
void handle_OnConnect() {
LED1status = LOW;
LED2status = LOW;
Serial.println("GPIO4 Status: OFF | GPIO5 Status: OFF");
server.send(200, "text/html", SendHTML(LED1status,LED2status));
}
void handle_led1on() {
LED1status = HIGH;
Serial.println("GPIO4 Status: ON");
server.send(200, "text/html", SendHTML(true,LED2status));
}
void handle_led1off() {
LED1status = LOW;
Serial.println("GPIO4 Status: OFF");
server.send(200, "text/html", SendHTML(false,LED2status));
}
void handle_led2on() {
LED2status = HIGH;
Serial.println("GPIO5 Status: ON");
server.send(200, "text/html", SendHTML(LED1status,true));
}
void handle_led2off() {
LED2status = LOW;
Serial.println("GPIO5 Status: OFF");
server.send(200, "text/html", SendHTML(LED1status,false));
}
void handle_NotFound(){
server.send(404, "text/plain", "Not found");
}
String SendHTML(uint8_t led1stat,uint8_t led2stat){
String ptr = "<!DOCTYPE html> <html>\n";
ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr +="<title>LED Control</title>\n";
ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
ptr +=".button {display: block;width: 80px;background-color: #3498db;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
ptr +=".button-on {background-color: #3498db;}\n";
ptr +=".button-on:active {background-color: #2980b9;}\n";
ptr +=".button-off {background-color: #34495e;}\n";
ptr +=".button-off:active {background-color: #2c3e50;}\n";
ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
ptr +="</style>\n";
ptr +="</head>\n";
ptr +="<body>\n";
ptr +="<h1>ESP32 Web Server</h1>\n";
ptr +="<h3>Using Station(STA) Mode</h3>\n";
if(led1stat)
{ptr +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";}
else
{ptr +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";}
if(led2stat)
{ptr +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";}
else
{ptr +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";}
ptr +="</body>\n";
ptr +="</html>\n";
return ptr;
}Akses Server Web di Mode STA
Setelah upload sketsa, buka Serial Monitor di baud rate 115200, terus tekan tombol RESET di ESP32. Kalau semua lancar, bakal muncul alamat IP dinamis yang didapetin dari router kamu, sama pesan “HTTP server started”.
Sekarang, sambil pantau URL-nya, klik tombol buat nyalain LED1. Begitu tombolnya diklik, ESP32 bakal nerima permintaan buat URL /led1on, terus nyalain LED1. Halaman web bakal diperbarui dengan status LED yang baru, dan status pin GPIO juga bakal muncul di Serial Monitor.
Kamu bisa coba tombol LED2 juga buat ngecek apakah fungsinya sama.
Yuk, kita liat lebih dekat kodenya biar kamu paham gimana cara kerjanya, jadi kamu bisa modifikasi sesuai kebutuhan Kamu.
Penjelasan Kode
Perbedaan utama antara kode ini dan yang sebelumnya adalah, kalau di kode ini kita nggak bikin jaringan WiFi sendiri, tapi kita nyambung ke jaringan yang udah ada pake fungsi WiFi.begin().
//connect to your local wi-fi network
WiFi.begin(ssid, password);Saat ESP32 mencoba menyambung ke jaringan, kita dapat menggunakan fungsi WiFi.status() untuk memeriksa status konektivitas.
//check wi-fi is connected to wi-fi network
while (WiFi.status() != WL_CONNECTED)
{
delay(1000);
Serial.print(".");
}Sekedar informasi, fungsi ini mengembalikan status berikut:
WL_CONNECTED: saat terhubung ke jaringan Wi-Fi
WL_NO_SHIELD: ketika tidak ada pelindung Wi-Fi
WL_IDLE_STATUS: status sementara yang ditetapkan ketika WiFi.begin() dipanggil dan tetap aktif hingga jumlah upaya berakhir (menghasilkan WL_CONNECT_FAILED) atau koneksi dibuat (menghasilkan WL_CONNECTED)
WL_NO_SSID_AVAIL: ketika tidak ada SSID yang tersedia
WL_SCAN_COMPLETED: ketika pemindaian jaringan selesai
WL_CONNECT_FAILED: ketika koneksi gagal untuk semua upaya
WL_CONNECTION_LOST: ketika koneksi terputus
WL_DISCONNECTED: ketika terputus dari jaringan
Setelah terhubung ke jaringan, fungsi WiFi.localIP() digunakan untuk mencetak alamat IP ESP32.
Serial.println("");
Serial.println("WiFi connected..!");
Serial.print("Got IP: "); Serial.println(WiFi.localIP());Perbedaan utama antara mode AP dan STA cuma di satu hal: yang satu bikin jaringannya sendiri, sementara yang satunya lagi nyambung ke jaringan yang udah ada. Jadi, kode buat nangani permintaan HTTP dan nyajikan halaman web di mode STA sebenernya sama aja kayak di mode AP yang udah dijelasin sebelumnya. Ini termasuk hal-hal berikut:
Mendeklarasikan pin GPIO ESP32 yang terhubung dengan LED
Mendefinisikan beberapa metode server.on() untuk menangani permintaan HTTP yang masuk
Mendefinisikan metode server.onNotFound() untuk menangani HTTP 404 error
Membuat fungsi khusus yang dijalankan ketika URL tertentu ditemukan
Membuat halaman HTML
Menata halaman web
Membuat tombol dan menampilkan statusnya
Sumber : https://lastminuteengineers.com/creating-esp32-web-server-arduino-ide/
