Halo teman-teman, selamat datang kembali di web saya. Hari ini saya ingin berbagi untuk membuat project iot menggunakan microcontroller kesayangan kita ESP32 sebagai server dan web pada laptop / handpone kita sebagai client. Project kali ini kita akan mengendalikan 3 buah led via web. Web akan dikukan sebagai client untuk mengirim perintah menyalakan atau mematikan led.

Alat dan Bahan

• ESP32
• LED (3 buah)
• Resistor 220Ω (3 buah, untuk masing-masing LED)
• Breadboard
• Kabel jumper

Skema Rangkaian

• LED 1: Anoda (+) ke GPIO 18, Katoda (-) → Resistor 220Ω → GND
• LED 2: Anoda (+) ke GPIO 19, Katoda (-) → Resistor 220Ω → GND
• LED 3: Anoda (+) ke GPIO 21, Katoda (-) → Resistor 220Ω → GND

Kode Program ESP32

ESP32 akan berfungsi sebagai web server, dan antarmuka web memungkinkan pengguna untuk menyalakan dan mematikan setiap LED secara individu.

#include <WiFi.h>
#include <WebServer.h>  // Library web server

// Konfigurasi Wi-Fi
const char* ssid = "Nama_WiFi";     // Nama Wi-Fi
const char* password = "PasswordWiFi"; // Password Wi-Fi

// Inisialisasi web server pada port 80
WebServer server(80);

// Deklarasi pin untuk LED
const int led1 = 18;
const int led2 = 19;
const int led3 = 21;

// Setup awal
void setup() {
  // Konfigurasi pin sebagai output
  pinMode(led1, OUTPUT);
  pinMode(led2, OUTPUT);
  pinMode(led3, OUTPUT);

  // Set LED dalam kondisi mati
  digitalWrite(led1, LOW);
  digitalWrite(led2, LOW);
  digitalWrite(led3, LOW);

  // Memulai koneksi Wi-Fi
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  Serial.println("Menghubungkan ke Wi-Fi...");

  // Tunggu hingga koneksi berhasil
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.print(".");
  }
  Serial.println("\nWi-Fi terhubung.");
  Serial.println(WiFi.localIP());  // Tampilkan alamat IP ESP32

  // Route untuk halaman utama
  server.on("/", handleRoot);

  // Route untuk kontrol LED
  server.on("/led1/on", []() { digitalWrite(led1, HIGH); server.send(200, "text/html", "LED 1 ON"); });
  server.on("/led1/off", []() { digitalWrite(led1, LOW); server.send(200, "text/html", "LED 1 OFF"); });

  server.on("/led2/on", []() { digitalWrite(led2, HIGH); server.send(200, "text/html", "LED 2 ON"); });
  server.on("/led2/off", []() { digitalWrite(led2, LOW); server.send(200, "text/html", "LED 2 OFF"); });

  server.on("/led3/on", []() { digitalWrite(led3, HIGH); server.send(200, "text/html", "LED 3 ON"); });
  server.on("/led3/off", []() { digitalWrite(led3, LOW); server.send(200, "text/html", "LED 3 OFF"); });

  // Mulai server
  server.begin();
  Serial.println("Server web aktif.");
}

void loop() {
  // Menangani permintaan dari klien
  server.handleClient();
}

// Fungsi untuk menangani halaman utama
void handleRoot() {
  String html = "<h1>Kontrol 3 LED via Web</h1>"
                "<button onclick=\"fetch('/led1/on')\">LED 1 ON</button>"
                "<button onclick=\"fetch('/led1/off')\">LED 1 OFF</button><br><br>"
                "<button onclick=\"fetch('/led2/on')\">LED 2 ON</button>"
                "<button onclick=\"fetch('/led2/off')\">LED 2 OFF</button><br><br>"
                "<button onclick=\"fetch('/led3/on')\">LED 3 ON</button>"
                "<button onclick=\"fetch('/led3/off')\">LED 3 OFF</button>";
  server.send(200, "text/html", html);  // Kirim halaman HTML ke browser
}

Penjelasan Kode

1. WiFi.begin(): ESP32 terhubung ke jaringan Wi-Fi.
2. Web Server: ESP32 bertindak sebagai web server yang merespons permintaan HTTP dari browser.
3. Route: Setiap LED memiliki dua route, satu untuk menyalakan (/on) dan satu untuk mematikan (/off).
4. fetch(): JavaScript pada halaman web mengirim permintaan HTTP untuk mengubah status LED.

Upload Kode ke ESP32

1. Buka Arduino IDE dan pilih board ESP32 Dev Module.
2. Sambungkan ESP32 ke komputer dan pilih port yang sesuai.
3. Upload kode ke ESP32.

Akses UI Web

1. Buka Serial Monitor pada pada Arduino IDE dan catat alamat IP ESP32.
2. Ketik alamat IP di browser (ip yang di dapat dari step sebelumya), misalnya:

   http://192.168.1.100/

3. Anda akan melihat tampilan pada web dengan tombol untuk mengontrol ketiga LED.

Pengujian

1. Buka halaman web di browser dan klik tombol ON atau OFF untuk setiap LED.
2. Pastikan LED menyala dan mati sesuai perintah yang Anda berikan melalui web.

Pengembangan Lebih Lanjut

• Tambahkan fungsi timer agar LED otomatis mati setelah beberapa detik.
• Gunakan WebSocket agar kontrol LED lebih real-time tanpa refresh halaman.
• Terapkan kontrol jarak jauh melalui cloud platform seperti Blynk atau ThingSpeak.

Kesimpulan

Dengan proyek ini, Anda telah belajar cara mengontrol 3 LED menggunakan ESP32 melalui web interface. Proyek ini bisa dikembangkan lebih lanjut menjadi sistem kontrol otomatisasi rumah atau perangkat IoT lainnya.