SIMULASI ESP32 SEBAGAI WEB SERVER MODE STASION (STA) UNTUK MENGONTROL LED MELALUI BROWSER
Disusun oleh:
Muhammad Adrian
Vibrianto 24051204124
Mohammad Rizqi Nova
Triatmaja 24051204131
Adhim Musafak 24051204191
M. Faisal Alfiansyah 24051204205
BAB I PENDAHULUAN
1.1 Latar Belakang
Perkembangan teknologi Internet of Things (IoT) dan sistem terbenam (embedded system) telah mengubah landasan bagaimana perangkat elektronik dikendalikan dan dipantau secara jarak jauh. Salah satu mikrokontroler yang populer dalam aplikasi IoT adalah ESP32, yang diproduksi oleh Espressif Systems. ESP32 dilengkapi dengan modul Wi-Fi dan Bluetooth internal, berdaya rendah, serta memiliki kinerja tinggi, menjadikannya pilihan utama dalam perancangan perangkat pintar.
Dalam arsitektur jaringan Wi-Fi pada ESP32, terdapat dua mode operasi utama: Mode Access Point (AP) dan Mode Station (STA). Pada mode AP, ESP32 bertindak sebagai pemancar jaringan (router lokal) di mana perangkat klien harus terhubung langsung ke SSID yang dipancarkan oleh ESP32. Sebaliknya, pada Mode Station (STA), ESP32 bertindak sebagai perangkat klien yang terhubung ke jaringan Wi-Fi lokal yang sudah ada (seperti Access Point atau Router rumah). Mode STA menawarkan keunggulan signifikan, yaitu ESP32 dan perangkat klien (seperti laptop atau smartphone) dapat berada dalam satu jaringan lokal yang sama tanpa memutus akses internet pada perangkat klien tersebut.
Penggunaan ESP32 sebagai Web Server HTTP memungkinkan mikrokontroler untuk menyajikan halaman web HTML kepada peramban (browser). Melalui halaman web ini, pengguna dapat mengirimkan perintah kontrol (misalnya mengubah status logika pin GPIO) cukup dengan mengeklik tombol pada antarmuka browser. Penerapan kontrol LED berbasis Web Server ini merupakan salah satu fondasi utama dalam perancangan Smart Home dan sistem otomatisasi industri.
Untuk mempermudah proses perancangan, pembuatan program, dan verifikasi sebelum implementasi perangkat keras secara fisik, digunakan platform simulasi Wokwi. Wokwi mendukung simulasi jaringan Wi-Fi virtual (Wokwi-GUEST) yang memungkinkan ESP32 menjalankan fungsi Web Server dan diakses secara nyata melalui koneksi internet/lokal. Berdasarkan latar belakang tersebut, laporan ini disusun untuk membahas perancangan, implementasi program, dan pengujian simulasi ESP32 sebagai Web Server Mode STA untuk mengontrol LED melalui peramban web.
1.2 Rumusan Masalah
Berdasarkan latar belakang yang telah dijelaskan, rumusan masalah dalam proyek ini adalah:
Bagaimana merancang sistem Web Server berbasis ESP32 pada Mode Station (STA)?
Bagaimana merancang program dan antarmuka web (HTML/CSS) pada ESP32 untuk mengendalikan LED melalui browser?
Bagaimana melakukan simulasi dan pengujian sistem Web Server ESP32 menggunakan Wokwi?
1.3 Tujuan Laporan
Tujuan dari pembuatan laporan dan proyek ini adalah:
Mengetahui proses konfigurasi jaringan ESP32 dalam Mode Station (STA).
Memahami cara ESP32 mengolah HTTP Request dari peramban web untuk mengendalikan keluaran digital pin GPIO.
Melakukan simulasi dan pengujian sistem Web Server pengontrol LED secara interaktif pada Wokwi.
1.4 Manfaat Penulisan
Manfaat yang diperoleh dari pembuatan proyek ini adalah:
Menambah pemahaman mengenai penggunaan ESP32 sebagai Web Server dan mikrokontroler IoT.
Memahami protokol komunikasi HTTP dan arsitektur jaringan Mode Station (STA).
Melatih kemampuan dalam membuat program C++/Arduino dan merancang rangkaian mikrokontroler.
Menambah pengalaman dalam melakukan simulasi sistem elektronik dan jaringan menggunakan Wokwi.
BAB II TINJAUAN PUSTAKA
2.1 Dasar Teori
2.1.1 Internet of Things (IoT) dan Otomatisasi
Internet of Things (IoT) merupakan konsep integrasi antara perangkat keras, sensor, dan sistem komputasi yang terhubung untuk mengumpulkan serta mengolah data secara otomatis melalui jaringan internet atau lokal. Penggunaan teknologi IoT pada sistem kontrol dan pemantauan terbukti efektif meningkatkan efisiensi operasional dan fleksibilitas akses. Dalam aplikasi Web Server terbenam, perangkat mikrokontroler berkomunikasi langsung dengan peramban web (client) menggunakan protokol HTTP (Hypertext Transfer Protocol).
2.1.2 Mikrokontroler ESP32
ESP32 merupakan sistem dalam keping (System on Chip / SoC) berkinerja tinggi yang dikembangkan oleh Espressif Systems. Mikrokontroler ini dilengkapi dengan prosesor dual-core Tensilica Xtensa 32-bit, antarmuka komunikasi nirkabel (Wi-Fi dan Bluetooth), pin General Purpose Input/Output (GPIO), serta berbagai modul komunikasi internal. ESP32 banyak digunakan dalam pengembangan sistem kendali berbasis IoT karena keandalan pemrosesan data, harga terjangkau, serta fleksibilitas konektivitas nirkabelnya.
2.1.3 Wi-Fi Mode: Station (STA) vs Access Point (AP)
Dalam arsitektur Wi-Fi ESP32, Mode Station (STA) memungkinkan ESP32 bertindak sebagai klien yang terhubung ke jaringan Wi-Fi lokal (seperti router atau Hotspot). ESP32 menerima IP address dari DHCP server jaringan. Sebaliknya, Mode Access Point (AP) membuat ESP32 bertindak sebagai pemancar Wi-Fi sendiri. Penggunaan Mode STA memberikan keuntungan karena perangkat klien dan ESP32 terhubung pada jaringan yang sama tanpa memotong koneksi internet utama pada perangkat klien.
2.1.4 Web Server HTTP pada ESP32
Fungsi Web Server pada ESP32 dijalankan menggunakan pustaka <WiFi.h> dan <WebServer.h>. Server mendengarkan permintaan masuk pada port 80. Ketika peramban mengirimkan HTTP Request ke URL tertentu (seperti /led/on atau /led/off), ESP32 akan mengeksekusi handler terkait untuk mengubah status logika pin GPIO dan merespons dengan mengirimkan dokumen HTML ke peramban.
2.2 Komponen dan Perangkat Utama
2.2.1 Mikrokontroler ESP32
Berperan sebagai unit pemroses utama dan pengelola Web Server HTTP. ESP32 menangani koneksi jaringan Wi-Fi, menyimpan dan menyajikan antarmuka HTML, serta mengatur status logika pin GPIO.
2.2.2 LED (Light Emitting Diode) dan Resistor
LED difungsikan sebagai aktuator atau komponen luaran (output) utama yang menandakan status sakelar digital (ON/OFF). Resistor 220Ω dipasang secara seri dengan LED sebagai pembatas arus (current limiting resistor) guna mencegah arus berlebih yang dapat merusak LED atau pin GPIO ESP32.
2.2.3 Simulator Wokwi
Wokwi merupakan platform simulator elektronik dan mikrokontroler berbasis web yang mendukung berbagai perangkat keras, termasuk ESP32 beserta komponen pendukung dan fitur konektivitas jaringan (Wokwi-GUEST). Simulator ini memungkinkan perancangan tata letak rangkaian, pengkabelan, serta pengujian logika program dan akses Web Server secara virtual sebelum diimplementasikan pada perangkat keras fisik.
BAB III PEMBAHASAN
3.1 Penjelasan Simulasi
Simulasi sistem ini bertujuan untuk menguji kemampuan ESP32 dalam menghubungkan diri ke jaringan Wi-Fi dalam mode Station (STA), menjalankan HTTP Web Server, serta merespons perintah pengontrolan LED dari peramban web.
Alur kerja sistem simulasi dapat dijelaskan sebagai berikut:
Inisialisasi: Saat ESP32 dinyalakan, program menginisialisasi pin GPIO LED sebagai OUTPUT dan memulai koneksi Wi-Fi ke AP Wokwi-GUEST.
Pembacaan IP Address: Setelah berhasil terhubung ke jaringan Wi-Fi, ESP32 menerima alamat IP lokal dari DHCP server dan mencetaknya pada Serial Monitor.
Penyajikan Antarmuka Web: Pengguna membuka alamat IP ESP32 di peramban web. ESP32 merespons permintaan HTTP GET / dengan mengirimkan halaman HTML yang berisi status LED saat ini (ON/OFF) serta tombol kendali.
Eksekusi Perintah: Saat tombol "TURN ON" diklik, peramban mengirimkan request /led/on. ESP32 mengubah logika GPIO 2 menjadi HIGH (LED menyala) dan memperbarui antarmuka web. Sebaliknya, tombol "TURN OFF" mengirimkan request /led/off yang mengubah GPIO 2 menjadi LOW (LED padam).
3.2 Konfigurasi Rangkaian
Konfigurasi hubungan komponen pada simulasi disusun sebagai berikut:
Tabel 3.1 Konfigurasi Rangkaian Simulasi ESP32
Berikut adalah program C++ lengkap yang diunggah ke mikrokontroler ESP32 pada simulasi Wokwi:
#include <WiFi.h>
#include <WebServer.h>
// Konfigurasi Kredensial Wi-Fi (Mode STA Wokwi)
const char* ssid = "Wokwi-GUEST";
const char* password = "";
// Definisi Pin LED
const int ledPin = 2;
// Inisialisasi Objek WebServer pada Port 80
WebServer server(80);
// Status LED
bool ledState = false;
// Fungsi untuk Membuat Halaman HTML Antarmuka Web
String SendHTML(bool state) {
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>ESP32 Web Server Mode STA</title>\n";
ptr += "<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
ptr += "body{margin-top: 50px; background-color: #f4f4f9;} h1 {color: #333333;}\n";
ptr += "p {font-size: 18px; color: #666666;}\n";
ptr += ".button {display: inline-block; background-color: #4CAF50; border: none; color: white; padding: 16px 40px;\n";
ptr += "text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer; border-radius: 8px;}\n";
ptr += ".button-off {background-color: #f44336;}\n";
ptr += "</style>\n";
ptr += "</head>\n";
ptr += "<body>\n";
ptr += "<h1>ESP32 Web Server - Mode Station</h1>\n";
ptr += "<p>Kontrol LED melalui Browser</p>\n";
if(state) {
ptr += "<p>Status LED: <strong style=\"color:green;\">NYALA (ON)</strong></p>\n";
ptr += "<a class=\"button button-off\" href=\"/led/off\">TURN OFF</a>\n";
} else {
ptr += "<p>Status LED: <strong style=\"color:red;\">PADAM (OFF)</strong></p>\n";
ptr += "<a class=\"button\" href=\"/led/on\">TURN ON</a>\n";
}
ptr += "</body>\n";
ptr += "</html>\n";
return ptr;
}
// Handler untuk Root URL (/)
void handle_Root() {
server.send(200, "text/html", SendHTML(ledState));
}
// Handler untuk Menyalahkan LED (/led/on)
void handle_LedOn() {
ledState = true;
digitalWrite(ledPin, HIGH);
server.send(200, "text/html", SendHTML(ledState));
}
// Handler untuk Mematikan LED (/led/off)
void handle_LedOff() {
ledState = false;
digitalWrite(ledPin, LOW);
server.send(200, "text/html", SendHTML(ledState));
}
// Handler ketika Halaman Tidak Ditemukan (404)
void handle_NotFound() {
server.send(404, "text/plain", "Not found");
}
void setup() {
Serial.begin(115200);
pinMode(ledPin, OUTPUT);
digitalWrite(ledPin, LOW);
// Menghubungkan ke Wi-Fi Mode STA
Serial.println();
Serial.print("Connecting to Wi-Fi Network: ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("\nWi-Fi Connected successfully!");
Serial.print("IP Address ESP32: ");
Serial.println(WiFi.localIP());
// Definisi Route Web Server
server.on("/", handle_Root);
server.on("/led/on", handle_LedOn);
server.on("/led/off", handle_LedOff);
server.onNotFound(handle_NotFound);
// Memulai Server
server.begin();
Serial.println("HTTP Web Server Started");
}
void loop() {
server.handleClient();
}
3.4 Hasil Pengujian
Pengujian dilakukan pada platform Wokwi dengan tahapan dan hasil sebagai berikut:
Pengujian Koneksi Wi-Fi: Pada Serial Monitor, ESP32 menampilkan status proses koneksi hingga berhasil terhubung ke Wokwi-GUEST dan menampilkan alamat IP lokal.
Pengujian Akses Web Server: Alamat IP diakses melalui peramban web. ESP32 memberikan respons HTTP 200 OK dan menampilkan antarmuka web bertuliskan "ESP32 Web Server - Mode Station".
Pengujian Kontrol LED:
Ketika tombol "TURN ON" diklik, peramban mengirimkan HTTP GET /led/on. ESP32 mengaktifkan pin GPIO 2 (HIGH) sehingga LED menyala, dan tampilan web diperbarui menjadi status "NYALA (ON)".
Ketika tombol "TURN OFF" diklik, peramban mengirimkan HTTP GET /led/off. ESP32 menonaktifkan pin GPIO 2 (LOW) sehingga LED padam, dan tampilan web diperbarui menjadi status "PADAM (OFF)".
BAB IV PENUTUP
4.1 Kesimpulan
Berdasarkan hasil perancangan, simulasi, dan pengujian yang telah dilakukan, dapat disimpulkan bahwa:
ESP32 berhasil dikonfigurasikan sebagai Web Server HTTP pada Mode Station (STA) dengan terhubung ke jaringan Wi-Fi lokal Wokwi-GUEST.
Pengontrolan keluaran digital (GPIO 2 / LED) dapat dilakukan secara interaktif dan real-time langsung melalui peramban web.
Simulasi pada platform Wokwi berjalan dengan baik dan membuktikan fungsionalitas program C++ serta hubungan antar komponen elektronik.
4.2 Saran
Saran untuk pengembangan proyek ini ke depan meliputi:
Menerapkan teknologi AJAX atau WebSocket agar pembaruan status LED pada halaman web dapat terjadi secara otomatis tanpa memuat ulang (reload) halaman.
Menambahkan fitur keamanan seperti HTTP Basic Authentication agar akses kontrol Web Server lebih terproteksi.
Mengembangkan kontrol untuk beban listrik yang lebih besar menggunakan modul Relay atau mengintegrasikan sensor.
DAFTAR PUSTAKA
Espressif Systems. (2023). ESP32 Technical Reference Manual (Version 5.1). Espressif Systems. https://www.espressif.com/en/support/documents/technical-documents
Haigis, R. F. (2025). Smart light system berbasis sensor cahaya dengan teknologi IoT. JATI (Jurnal Mahasiswa Teknik Informatika), 9(3), 5057–5062. https://doi.org/10.36040/jati.v9i3.13588
Prihanto, A., Prapanca, A., & Alit, R. (2024). Adaptive smart lighting dengan memanfaatkan teknologi berbasis Internet of Things (IoT). Jurnal Ilmu Pendidikan dan Teknologi Pembelajaran, 4(1), 22–29.
Sukemi, S., Sutarno, S., Sembiring, S., Buchari, M. A., & Ubaya, H. (2022). Perancangan scoreboard digital untuk kegiatan olahraga bulu tangkis dengan menggunakan mikrokontroler Arduino Uno. Proceedings of National Colloquium Research and Community Service, 6. https://doi.org/10.33019/snppm.v6i0.3679
Wafiudin, M. I., Solichan, A., & Kiswanto, A. (2026). Sistem SOLART berbasis ESP32 untuk kendali otomatis lampu dan tirai berdasarkan intensitas cahaya. Jurnal Teknik Informatika dan Teknologi Informasi, 6(2). https://doi.org/10.55606/jutiti.v6i2.7623
Wokwi. (2026). ESP32 Wi-Fi Simulation & Web Server Documentation. Wokwi Documentation. https://docs.wokwi.com/
Tidak ada komentar:
Posting Komentar