kontrol LED NodeMCU dengan tampilan web modern + AJAX
Berikut versi kontrol LED NodeMCU dengan tampilan web modern + AJAX, sehingga kontrol tidak reload halaman, dan kamu bisa melihat status LED secara real-time (tanpa refresh).
Fitur:
- Tombol ON/OFF untuk tiap LED (tanpa reload)
- Status LED tampil langsung (real-time)
- Tombol “Semua ON” / “Semua OFF”
- Desain responsive, bisa diakses dari HP
Sketch Arduino IDE - Web Server + AJAX
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
const char* ssid = "NAMA_WIFI";
const char* password = "PASSWORD_WIFI";
const int ledPins[] = {D0, D1, D2, D3, D4, D5, D6, D7, D8};
const int ledCount = sizeof(ledPins) / sizeof(ledPins[0]);
ESP8266WebServer server(80);
void handleRoot() {
String html = R"rawliteral(
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Kendali LED AJAX</title>
<style>
body { font-family: sans-serif; text-align: center; padding: 20px; }
.btn { padding: 10px 20px; margin: 5px; font-size: 16px; border: none; border-radius: 5px; color: white; background: #007BFF; }
.btn:hover { background: #0056b3; }
.on { background: green; }
.off { background: red; }
</style>
<script>
function sendCmd(led, action) {
fetch(`/led?pin=${led}&action=${action}`)
.then(() => updateStatus());
}
function updateStatus() {
fetch("/status")
.then(res => res.json())
.then(data => {
for (let i = 0; i < data.length; i++) {
document.getElementById("status" + i).innerText = data[i] ? "ON" : "OFF";
document.getElementById("status" + i).style.color = data[i] ? "green" : "red";
}
});
}
setInterval(updateStatus, 2000);
window.onload = updateStatus;
</script>
</head>
<body>
<h2>Kendali LED NodeMCU (AJAX)</h2>
)rawliteral";
for (int i = 0; i < ledCount; i++) {
html += "<p>LED " + String(i) + ": <span id='status" + String(i) + "'>?</span><br>";
html += "<button class='btn' onclick='sendCmd(" + String(i) + ",\"ON\")'>ON</button> ";
html += "<button class='btn' onclick='sendCmd(" + String(i) + ",\"OFF\")'>OFF</button></p>";
}
html += R"rawliteral(
<hr>
<button class='btn on' onclick='for(let i=0;i<9;i++)sendCmd(i,"ON")'>Semua ON</button>
<button class='btn off' onclick='for(let i=0;i<9;i++)sendCmd(i,"OFF")'>Semua OFF</button>
</body></html>
)rawliteral";
server.send(200, "text/html", html);
}
void handleLED() {
if (!server.hasArg("pin") || !server.hasArg("action")) {
server.send(400, "text/plain", "Missing argument");
return;
}
int pin = server.arg("pin").toInt();
String action = server.arg("action");
if (pin < 0 || pin >= ledCount) {
server.send(400, "text/plain", "Invalid pin");
return;
}
digitalWrite(ledPins[pin], action == "ON" ? HIGH : LOW);
server.send(200, "text/plain", "OK");
}
void handleStatus() {
String json = "[";
for (int i = 0; i < ledCount; i++) {
json += digitalRead(ledPins[i]) == HIGH ? "true" : "false";
if (i < ledCount - 1) json += ",";
}
json += "]";
server.send(200, "application/json", json);
}
void setup() {
Serial.begin(115200);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) delay(500);
Serial.println(WiFi.localIP());
for (int i = 0; i < ledCount; i++) {
pinMode(ledPins[i], OUTPUT);
digitalWrite(ledPins[i], LOW);
}
server.on("/", handleRoot);
server.on("/led", handleLED);
server.on("/status", handleStatus);
server.begin();
}
void loop() {
server.handleClient();
}
Cara Pakai
- Ganti
NAMA_WIFIdanPASSWORD_WIFI. - Upload ke NodeMCU via Arduino IDE.
- Buka Serial Monitor untuk lihat IP (misal
192.168.1.88) - Akses di browser:
http://192.168.1.88 - Klik tombol ON/OFF tanpa reload. Status LED otomatis update setiap 2 detik.
