Mengontrol Lampu LED Menggunakan ESP32 dan PHP Web
I. Tujuan Praktikum
- Mampu mengintegrasikan ESP32 dengan aplikasi web berbasis PHP untuk mengontrol perangkat keras.
- Mengontrol lampu LED yang terhubung ke ESP32 melalui antarmuka web.
- Memahami cara komunikasi antara ESP32 dan server web.
II. Alat dan Bahan
- ESP32 Development Board.
- LED (Light Emitting Diode) – 1 buah.
- Resistor 220 ohm – 1 buah.
- Breadboard dan Jumper Wires.
- Kabel USB (untuk koneksi ESP32 ke komputer).
- Laptop/PC dengan aplikasi Arduino IDE dan koneksi internet.
- XAMPP atau Apache (untuk menjalankan server PHP).
- Browser Web (Google Chrome/Firefox).
III. Rangkaian Hardware
Hubungkan LED ke ESP32 dengan konfigurasi berikut:
- Kaki positif LED (anoda) dihubungkan ke pin GPIO 2 (misalnya) dari ESP32.
- Kaki negatif LED (katoda) dihubungkan ke resistor 220 ohm.
- Resistor kemudian dihubungkan ke GND (ground) ESP32.
Skema Rangkaian:
Ads Jadwal Training bisaioti Offline
| No | Materi | Tanggal | Waktu | Harga | Lokasi | View | Action |
|---|---|---|---|---|---|---|---|
| 1 | IOT PLC SCADA Siemens | 7-8 Juni 2025 | 08.00 - 16.00 | 2000000 | Surabaya | Silabus | Daftar Sekarang |
| 2 | IOT PLC SCADA Omron | 14 - 15 Juni 2025 | 08.00 - 16.00 | 2000000 | Surabaya | Silabus | Daftar Sekarang |
| 3 | IOT PLC SCADA Schneider | 21-22 Juni 2025 | 08.00 -16.00 | 2000000 | Surabaya | Silabus | Daftar Sekarang |
| 4 | IOT PLC SCADA Allen Bradley | 28-29 Juni 2025 | 08.00-16.00 | 2000000 | Surabaya | Silabus | Daftar Sekarang |
IV. Langkah-Langkah Praktikum
Langkah 1: Persiapan ESP32 dan Arduino IDE
- Install Board ESP32 di Arduino IDE:
- Buka Arduino IDE, kemudian buka Preferences dan tambahkan URL di Additional Board Manager URLs:
https://dl.espressif.com/dl/package_esp32_index.json
- Buka Tools -> Board -> Boards Manager, lalu cari ESP32 dan install.
- Buka Arduino IDE, kemudian buka Preferences dan tambahkan URL di Additional Board Manager URLs:
- Sambungkan ESP32 ke komputer melalui kabel USB.
- Pilih Board ESP32 dan Port COM yang sesuai dari menu Tools di Arduino IDE.
Langkah 2: Menulis Kode ESP32 untuk Mengontrol LED
Buat kode ESP32 untuk mengontrol LED melalui permintaan HTTP dari server PHP.
#include <WiFi.h>
// Data login WiFi
const char* ssid = "Nama_WiFi"; Â Â // Ganti dengan nama WiFi Anda
const char* password = "Password"; // Ganti dengan password WiFi Anda
WiFiServer server(80);
int ledPin = 2; // LED di GPIO 2
void setup() {
 Serial.begin(115200);
 // Set pin LED sebagai output
 pinMode(ledPin, OUTPUT);
 digitalWrite(ledPin, LOW);
 // Hubungkan ke WiFi
 Serial.println("Connecting to WiFi...");
 WiFi.begin(ssid, password);
 while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.println("Connecting...");
 }
 Serial.println("Connected to WiFi");
 Serial.println(WiFi.localIP());
 server.begin();
}
void loop() {
 WiFiClient client = server.available();  // Periksa jika ada klien yang terhubung
 if (client) {               // Jika ada klien
  Serial.println("New Client Connected.");
  String request = client.readStringUntil('\r');  // Baca request
  Serial.println(request);
  client.flush();
  // Parsing request untuk ON/OFF LED
  if (request.indexOf("/LED=ON") != -1) {
   digitalWrite(ledPin, HIGH);  // Nyalakan LED
  }
  if (request.indexOf("/LED=OFF") != -1) {
   digitalWrite(ledPin, LOW);  // Matikan LED
  }
  // HTML response
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  client.println("");  // End of HTTP headers
  client.println("<!DOCTYPE HTML>");
  client.println("<html>");
  client.println("<h1>Kontrol LED via Web</h1>");
  client.println("<p><a href=\"/LED=ON\"><button>ON</button></a></p>");
  client.println("<p><a href=\"/LED=OFF\"><button>OFF</button></a></p>");
  client.println("</html>");
  client.stop();
 }
}
Langkah 3: Menulis Kode PHP untuk Mengontrol ESP32
- Install XAMPP untuk menjalankan server PHP.
- Buka folder
htdocsdi direktori instalasi XAMPP (biasanya diC:\xampp\htdocs). - Buat folder baru misalnya
kontrol_led. - Buat file index.php di folder tersebut dengan kode berikut:
<?php
$esp_ip = '192.168.1.100'; // Ganti dengan IP address ESP32
if (isset($_GET['led'])) {
$led_state = $_GET['led'];
if ($led_state == 'ON') {
file_get_contents("http://$esp_ip/LED=ON");
} elseif ($led_state == 'OFF') {
file_get_contents("http://$esp_ip/LED=OFF");
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Kontrol LED via Web</title>
</head>
<body>
<h1>Kontrol LED ESP32</h1>
<p><a href="?led=ON"><button>Turn ON</button></a></p>
<p><a href="?led=OFF"><button>Turn OFF</button></a></p>
</body>
</html>
Langkah 4: Menjalankan Sistem
- Upload kode ESP32 ke board melalui Arduino IDE.
- Jalankan server XAMPP dan buka browser menuju
localhost/kontrol_led/index.php. - Pastikan ESP32 dan komputer terhubung ke jaringan WiFi yang sama.
Langkah 5: Mengontrol LED dari Web
- Pada halaman web di
localhost, klik tombol Turn ON atau Turn OFF. - Pastikan LED di ESP32 menyala atau mati sesuai perintah dari web.
V. Skenario Praktikum
- Peserta harus mampu menghubungkan ESP32 ke jaringan WiFi.
- Peserta akan membuat rangkaian dengan LED dan resistor, kemudian mengontrolnya melalui halaman web berbasis PHP.
- Web server akan mengirimkan perintah HTTP ke ESP32 untuk menyalakan atau mematikan LED.
Pertanyaan Diskusi:
- Apa peran dari setiap komponen dalam kontrol LED melalui web?
- Bagaimana cara kerja komunikasi antara server PHP dan ESP32 melalui HTTP request?
- Apa saja tantangan yang mungkin dihadapi dalam pengontrolan ESP32 via web, dan bagaimana mengatasinya?
