Control LED Melalui Secure Webserver ESP8266 / NodeMCU Dengan Password Login
 |
| preview project hari ini |
Control LED Melalui Webserver dengan ESP8266 atau NodeMCU, Proyek ini bertujuan untuk mengendalikan LED menggunakan ESP8266/NodeMCU yang terhubung ke jaringan Wi-Fi. Kita akan membuat sebuah webserver sederhana yang memungkinkan kita menyalakan dan mematikan LED melalui antarmuka web dengan 5 tombol. Setiap tombol akan mengendalikan satu LED yang berbeda. disini saya menggunakan NodeMCU sebagai percobaan perbedaanya dengan ESP8266 untuk di sketchnya nanti didefinisi pinya sudah saya kelompokan di tabel bawah GPIO untuk Esp8266 dan D untuk NodeMCU. Next lanjut ke Prosesnya persiapkan dulu
Alat dan Bahan :
1.ESP8266 Module atau NodeMCU
2. LED (5 buah)
3.Resistor (330 ohm - 1K ohm untuk setiap LED)
4. Breadboard dan Kabel Jumper
5. Software Arduino IDE untuk pemrograman
Skema Koneksi
1. Hubungkan LED ke pin GPIO yang berbeda di ESP8266 / NodeMCU :
- LED 1: GPIO 2 / - LED 1: D2
- LED 2: GPIO 3 / - LED 2: D3
- LED 3: GPIO 4 / - LED 3: D4
- LED 4: GPIO 5 / - LED4 : D5
- LED 5: GPIO 6 / - LED5 : D6
2. Setiap LED dihubungkan dengan resistor ke ground (GND).
Diagram Koneksi
ESP8266 LED
GPIO 2 ----->|---- 330Ω -----> GND
GPIO 3 ----->|---- 330Ω -----> GND
GPIO 4 ----->|---- 330Ω -----> GND
GPIO 5 ----->|---- 330Ω -----> GND
GPIO 6 ----->|---- 330Ω -----> GND
Pemrograman ESP8266 / NodeMCU
Instalasi Library
1. Buka Arduino IDE.
2. Pastikan Anda telah menginstal board ESP8266 (melalui Board Manager).
3. Tambahkan library `ESP8266WiFi` dan `ESP8266WebServer`.
Kode Program / Sketch
Berikut adalah kode untuk menghidupkan dan mematikan LED melalui webserver dengan menggunakan password login untuk keamanan server :
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
const char* ssid = "SSID wifi";
const char* password = "Password wifi";
ESP8266WebServer server(80);
// username and password for Login
const String username = "admin";
const String userPassword = "admin";
// Pin LED
const int ledPins[] = {D2, D3, D4, D5, D6};
bool isLoggedIn = false;
void setup() {
Serial.begin(115200);
// Set LED pins to OUTPUT and turn them off initially
for (int i = 0; i < 5; i++) {
pinMode(ledPins[i], OUTPUT);
digitalWrite(ledPins[i], HIGH); // Assuming HIGH means LED is off
}
// Connect to Wi-Fi
connectToWiFi();
// Set up web server routes
server.on("/", handleLogin);
server.on("/control", handleRoot);
server.on("/logout", handleLogout);
server.on("/checklogin", HTTP_POST, checkLogin);
// Set up LED control routes
for (int i = 0; i < 5; i++) {
server.on("/led" + String(i + 1) + "/on", [i]() {
turnOnLED(i);
});
server.on("/led" + String(i + 1) + "/off", [i]() {
turnOffLED(i);
});
}
server.begin();
Serial.println("Server started");
}
void connectToWiFi() {
WiFi.begin(ssid, password);
Serial.print("Connecting to WiFi");
unsigned long startAttemptTime = millis();
// Try to connect to WiFi for 10 seconds
while (WiFi.status() != WL_CONNECTED && millis() - startAttemptTime < 10000) {
delay(500);
Serial.print(".");
}
if (WiFi.status() == WL_CONNECTED) {
Serial.println("Connected to Wi-Fi");
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
} else {
Serial.println("Failed to connect to Wi-Fi");
// Handle failed connection (reset, enter AP mode, etc.)
}
}
void loop() {
server.handleClient();
}
void handleLogin() {
String html = "<html><head><title>Login</title></head><body>";
html += "<h1><center>Login Page</center></h1>";
html += "<form action='/checklogin' method='POST'>";
html += "<center>Username: <input type='text' name='username'><br></center>";
html += "<center>Password : <input type='password' name='password'><br></center>";
html += "<center><p></p></center>";
html += "<center><input type='submit' value='Login'></center>";
html += "<center><p>ueindo.com</p></center>";
html += "<center></form></body></html></center>";
server.send(200, "text/html", html);
}
void handleRoot() {
if (isLoggedIn == false) {
server.sendHeader("Location", "/");
server.send(200);
return; // Prevent further execution
} if (isLoggedIn == true) {
String html = "<html><head><style>"
"body { font-family: Arial, sans-serif; text-align: center; }"
"h1 { color: #333; }"
"h2 { color: #555; }"
".button {"
" padding: 10px 20px;"
" font-size: 16px;"
" margin: 5px;"
" border: none;"
" border-radius: 5px;"
" background-color: #007BFF;"
" color: white;"
" cursor: pointer;"
" transition: background-color 0.3s;"
"}"
".button:hover {"
" background-color: #0056b3;"
"}"
"</style></head><body>";
for (int i = 0; i < 5; i++) {
html += "<h2>LED " + String(i + 1) + "</h2>";
html += "<button class='button' onclick=\"location.href='/led" + String(i + 1) + "/on'\">ON</button> ";
html += "<button class='button' onclick=\"location.href='/led" + String(i + 1) + "/off'\">OFF</button><br>";
}
// Add Logout Button
html += "<center><h2> Lock & Logout </h2></center>";
html += "<h2><button class='button' onclick=\"location.href='/logout'\">LOCK (Kembali Login)</button></h2>";
html += "</body></html>";
server.send(200, "text/html", html);
}
}
void checkLogin() {
if (server.arg("username") == username && server.arg("password") == userPassword) {
isLoggedIn = true; // Set login state
server.sendHeader("Location", "/control");
server.send(303);
} else {
server.send(401, "text/html", "<h1><center>Tidak di Izinkan !</h1></center><center><p>-Pengguna tidak Dikenal-</p></center>");
}
}
void handleLogout() {
isLoggedIn = false; // Reset login state
server.sendHeader("Location", "/");
server.send(303);
}
void turnOnLED(int index) {
if (isLoggedIn == false) {
server.sendHeader("Location", "/");
server.send(200);
} if (isLoggedIn == true) {
digitalWrite(ledPins[index], LOW);
server.sendHeader("Location", "/control");
server.send(303);
}
}
void turnOffLED(int index) {
if (isLoggedIn == false) {
server.sendHeader("Location", "/");
server.send(200);
} if (isLoggedIn == true) {
digitalWrite(ledPins[index], HIGH);
server.sendHeader("Location", "/control");
server.send(303);
}
}
Penjelasan Kode
Library yang Digunakan:
ESP8266WiFi.h untuk menghubungkan ESP8266 ke jaringan Wi-Fi.
ESP8266WebServer.h untuk membuat webserver.
Inisialisasi Wi-Fi: ESP8266 terhubung ke Wi-Fi dan menampilkan alamat IP di Serial Monitor.
Routing : Setiap LED memiliki dua rute (ON/OFF) yang dipetakan ke fungsi turnOnLED` dan `turnOffLED`.
Antarmuka Web: Menghasilkan HTML sederhana dengan tombol untuk setiap LED. bisa di buka dengan Browser (chrome/firefox/mozilla,dll).
Pengujian Trial and Error
1. Upload kode ke ESP8266 / NodeMCU.
2. Buka Serial Monitor (CTRL+SHIFT+M) untuk melihat alamat IP.
3. Akses alamat IP yang muncul di serial monitor melalui browser web biasanya IP akan muncul dengan awalan 192.168.0.15
4. Coba tekan tombol ON dan OFF untuk setiap LED. disini saya hanya menggunakan 1 buah LED untuk sekedar trial dan itupun LED on Board bisa dilihat hasil trial pada gambar di bawah ini
 |
| Kondisi On |
 |
| Kondisi Off |
 |
| Kondisi On |
Critical Point !
1. Pastikan nama dan password wifi sesuai dengan SSID dan password Wi-fi teman-teman. akan terjadi connecting terus menerus jika tidak di periksa dengan benar
2. untuk username dan password login defaultnya adalah admin dan admin masukkan ketika halaman sudah terbuka. kemungkinan izin akses tidak di berikan, jika password salah cukup kembali dan masukkan lagi atau refresh browser
3. pastikan teman-teman menginstall library dahulu, sudah saya berikan nama librarynya di postingan ini. sketch akan error dan tidak bisa di upload
Dengan proyek ini, Anda telah berhasil membuat sistem kontrol LED sederhana menggunakan ESP8266 dan webserver. Anda dapat mengembangkan proyek ini lebih lanjut dengan menambahkan lebih banyak fitur, seperti status LED atau pengendalian dengan aplikasi mobile. bisa juga di tambahkan relay untuk menangani arus listrik yang lebih besar terimakasih dan Selamat mencoba!
Umbrella Electronica
