🌐 Koneksi WiFi & Web Server dengan ESP32 / ESP8266

Belajar membuat ESP32/ESP8266 terkoneksi WiFi dan menampilkan status sensor/LED melalui Web Server.

🎯 Tujuan: Siswa mampu menghubungkan ESP ke WiFi, membuat web server, dan mengontrol perangkat melalui browser.

🔧 Komponen yang Dibutuhkan

  • ESP32 / ESP8266 NodeMCU
  • LED + resistor 220Ω
  • Kabel jumper dan breadboard
  • Koneksi WiFi
  • Software: Arduino IDE + Library ESPAsyncWebServer / ESP8266WebServer

1️⃣ Konsep Dasar

  • ESP sebagai Web Server → dapat menampilkan halaman HTML sederhana.
  • ESP mengontrol aktuator (misal LED) melalui perintah dari browser.
  • ESP membaca sensor dan menampilkan status secara real-time.

2️⃣ Koneksi WiFi

ESP perlu terhubung WiFi untuk bisa menjadi web server dan diakses melalui browser.

#include <WiFi.h> // ESP32
//#include <ESP8266WiFi.h> // ESP8266

const char* ssid = "NAMA_WIFI";
const char* password = "PASSWORD_WIFI";

void setup() {
  Serial.begin(115200);
  WiFi.begin(ssid, password);

  Serial.print("Menghubungkan ke WiFi");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println();
  Serial.print("Terhubung! IP ESP: ");
  Serial.println(WiFi.localIP());
}

void loop() {
  // ESP terhubung ke WiFi
}

3️⃣ Membuat Web Server Sederhana

Contoh menyalakan/mematikan LED melalui browser:

#include <WiFi.h>
#include <WebServer.h> // ESP32
//#include <ESP8266WebServer.h> // ESP8266

const char* ssid = "NAMA_WIFI";
const char* password = "PASSWORD_WIFI";

WebServer server(80);

int ledPin = 2; // ESP32 onboard LED

void handleRoot() {
  String html = "<html><body>";
  html += "<h1>Kontrol LED</h1>";
  html += "<a href='/on'>LED ON</a><br>";
  html += "<a href='/off'>LED OFF</a>";
  html += "</body></html>";
  server.send(200, "text/html", html);
}

void handleLEDOn() {
  digitalWrite(ledPin, HIGH);
  server.sendHeader("Location", "/");
  server.send(303);
}

void handleLEDOff() {
  digitalWrite(ledPin, LOW);
  server.sendHeader("Location", "/");
  server.send(303);
}

void setup() {
  Serial.begin(115200);
  pinMode(ledPin, OUTPUT);

  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println();
  Serial.print("ESP Web Server IP: ");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);
  server.on("/on", handleLEDOn);
  server.on("/off", handleLEDOff);

  server.begin();
}

void loop() {
  server.handleClient(); // Tangani request dari browser
}

📘 Penjelasan

  • ESP32/ESP8266 dapat membuat web server sendiri dan diakses via IP.
  • Library WebServer / ESP8266WebServer digunakan untuk menangani HTTP request.
  • URL /on dan /off digunakan untuk menyalakan/mematikan LED.
  • Browser → ESP → Mengontrol perangkat real-time.
  • Fungsi server.handleClient() wajib dipanggil di loop agar server tetap responsif.

📝 Aktivitas Siswa

  1. Tambahkan status LED di halaman web (ON/OFF) secara real-time.
  2. Tambahkan lebih dari 1 LED dan buat tombol kontrol masing-masing.
  3. Integrasikan sensor suhu atau kelembaban, tampilkan nilainya di halaman web.
  4. Buat tampilan HTML lebih menarik dengan tombol berwarna dan layout sederhana.
  5. Gunakan millis() agar pembacaan sensor dan server tetap responsif.

No comments:

Post a Comment

Subscribe to: Comments (Atom)