Menyalakan LED via Web Server di NODEMCU (Access Point Mode dan Station Mode)

Halo sobat Nanobot, pada postingan sebelumnya kita sudah membuat web server internal di dalam ESP8266 (disini kita menggunakan Nodemcu). Pada tutorial ini kita akan mencoba menyalakan LED via web server. Mau tahu caranya?

Pada percobaan ini alat yang dibutuhkan adalah

Nodemcu
Shield Nodemcu
Kabel jumper
Resistor 220 ohm
LED 3 mm

Disini kita akan membuat 2 percobaan. Percobaan pertama kita akan menjadikan Nodemcu sebagai Access Point dan percobaan kedua kita akan menjadikan Nodemcu sebagai station.

Berikut ini adalah langkah percobaannya =

Pertama, setelah menyiapkan alat selanjutnya kita rangkai terlebih dulu sesuai dengan gambar di bawah ini

Gambar 1. Rangkaian Percobaan

Kedua, kita buat program

Program menyalakan LED via Web Server (Mode Access Point)

/* Tutorial Menyalakan LED dengan Web Server Internal ESP8266 AP Mode
* Dibuat oleh : Nanobot Workshop
* nanobotworkshop.blogspot.com
*/

#include <ESP8266WiFi.h> //Library ESP8266
#include <ESP8266WebServer.h> //Librari Web Server ESP8266

//Konfigurasi SSID dan password (Sesuaikan dengan SSID dan Password yang diinginkan)
const char* ssid = "Nanobot Workshop";
const char* password = "nanobot11";

ESP8266WebServer server(80);

//Konfigurasi Pin Output
#define led1 D4
bool led1Status = LOW;
#define led2 D5
bool led2Status = LOW;

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

//Konfigurasi AP
Serial.println("Memulai Access Point .... ");
boolean result = WiFi.softAP(ssid, password);
if(result == true) {
Serial.println("Access point siap digunakan");
Serial.print("IP Address = ");
Serial.println(WiFi.softAPIP());
}
delay(100);

//Konfigurasi Web Server
server.on("/", handle_OnConnect);
server.on("/led1on", handle_led1on);
server.on("/led1off", handle_led1off);
server.on("/led2on", handle_led2on);
server.on("/led2off", handle_led2off);

server.begin();
Serial.println("Web Server siap digunakan");

}

void loop() {
server.handleClient();

if(led1Status) {
digitalWrite(led1, HIGH);
}
else {
digitalWrite(led1, LOW);
}

if(led2Status) {
digitalWrite(led2, HIGH);
}
else {
digitalWrite(led2, LOW);
}
}

void handle_OnConnect() {
led1Status = LOW;
led2Status = LOW;
Serial.println("Status : LED 1 OFF | LED 2 OFF");
server.send(200, "text/html", SendHTML(led1Status, led2Status));
}

void handle_led1on() {
led1Status = HIGH;
Serial.println("Status : LED 1 ON | LED 2 OFF");
server.send(200, "text/html", SendHTML(true, led2Status));
}

void handle_led1off() {
led1Status = LOW;
Serial.println("Status : LED 1 OFF | LED 2 OFF");
server.send(200, "text/html", SendHTML(false, led2Status));
}

void handle_led2on() {
led2Status = HIGH;
Serial.println("Status : LED 1 OFF | LED 2 ON");
server.send(200, "text/html", SendHTML(led1Status, true));
}

void handle_led2off() {
led2Status = LOW;
Serial.println("Status : LED 1 OFF | LED 2 OFF");
server.send(200, "text/html", SendHTML(led1Status, false));
}

void handle_NotFound() {
server.send(404, "text/plain", "NOT FOUND");
}

//Tampilan Web
String SendHTML(uint8_t led1stat, uint8_t led2stat) {
String ptr = "<!DOCTYPE html> <html>\n";
ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr +="<title>LED Control</title>\n";
ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
ptr +=".button {display: block;width: 80px;background-color: #1abc9c;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
ptr +=".button-on {background-color: #1abc9c;}\n";
ptr +=".button-on:active {background-color: #16a085;}\n";
ptr +=".button-off {background-color: #34495e;}\n";
ptr +=".button-off:active {background-color: #2c3e50;}\n";
ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
ptr +="</style>\n";
ptr +="</head>\n";
ptr +="<body>\n";
ptr +="<h1>ESP8266 Web Server</h1>\n";
ptr +="<h3>Using Access Point(AP) Mode</h3>\n";

if(led1stat)
{ptr +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";}
else
{ptr +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";}

if(led2stat)
{ptr +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";}
else
{ptr +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";}

ptr +="</body>\n";
ptr +="</html>\n";
return ptr;
}

Program menyalakan LED via Web Server (Station Mode)

/* Tutorial Menyalakan LED dengan Web Server Internal ESP8266 Station Mode
* Dibuat oleh : Nanobot Workshop
* nanobotworkshop.blogspot.com
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

//Konfigurasi SSID dan password (ganti dengan SSID dan password WiFi yang ingin dihubungkan)
const char* ssid = "xxxxxxxxx";
const char* password = "xxxxxxxx";

ESP8266WebServer server(80);

//Konfigurasi Pin Output
#define led1 D4
bool led1Status = LOW;
#define led2 D5
bool led2Status = LOW;

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

//Konfigurasi Station
Serial.print("Menyambungkan ke ");
Serial.println(ssid);

WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi terhubung");
Serial.print("IP Address : ");
Serial.println(WiFi.localIP());

//Konfigurasi Web Server
server.on("/", handle_OnConnect);
server.on("/led1on", handle_led1on);
server.on("/led1off", handle_led1off);
server.on("/led2on", handle_led2on);
server.on("/led2off", handle_led2off);

server.begin();
Serial.println("Web Server siap digunakan");

}

void loop() {
server.handleClient();

if(led1Status) {
digitalWrite(led1, HIGH);
}
else {
digitalWrite(led1, LOW);
}

if(led2Status) {
digitalWrite(led2, HIGH);
}
else {
digitalWrite(led2, LOW);
}
}

void handle_OnConnect() {
led1Status = LOW;
led2Status = LOW;
Serial.println("Status : LED 1 OFF | LED 2 OFF");
server.send(200, "text/html", SendHTML(led1Status, led2Status));
}

void handle_led1on() {
led1Status = HIGH;
Serial.println("Status : LED 1 ON | LED 2 OFF");
server.send(200, "text/html", SendHTML(true, led2Status));
}

void handle_led1off() {
led1Status = LOW;
Serial.println("Status : LED 1 OFF | LED 2 OFF");
server.send(200, "text/html", SendHTML(false, led2Status));
}

void handle_led2on() {
led2Status = HIGH;
Serial.println("Status : LED 1 OFF | LED 2 ON");
server.send(200, "text/html", SendHTML(led1Status, true));
}

void handle_led2off() {
led2Status = LOW;
Serial.println("Status : LED 1 OFF | LED 2 OFF");
server.send(200, "text/html", SendHTML(led1Status, false));
}

void handle_NotFound() {
server.send(404, "text/plain", "NOT FOUND");
}

String SendHTML(uint8_t led1stat, uint8_t led2stat) {
String ptr = "<!DOCTYPE html> <html>\n";
ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr +="<title>LED Control</title>\n";
ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
ptr +=".button {display: block;width: 80px;background-color: #1abc9c;border: none;color: white;padding: 13px 30px;text-decoration: none;font-size: 25px;margin: 0px auto 35px;cursor: pointer;border-radius: 4px;}\n";
ptr +=".button-on {background-color: #1abc9c;}\n";
ptr +=".button-on:active {background-color: #16a085;}\n";
ptr +=".button-off {background-color: #34495e;}\n";
ptr +=".button-off:active {background-color: #2c3e50;}\n";
ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";
ptr +="</style>\n";
ptr +="</head>\n";
ptr +="<body>\n";
ptr +="<h1>ESP8266 Web Server</h1>\n";
ptr +="<h3>Using Access Point(AP) Mode</h3>\n";

if(led1stat)
{ptr +="<p>LED1 Status: ON</p><a class=\"button button-off\" href=\"/led1off\">OFF</a>\n";}
else
{ptr +="<p>LED1 Status: OFF</p><a class=\"button button-on\" href=\"/led1on\">ON</a>\n";}

if(led2stat)
{ptr +="<p>LED2 Status: ON</p><a class=\"button button-off\" href=\"/led2off\">OFF</a>\n";}
else
{ptr +="<p>LED2 Status: OFF</p><a class=\"button button-on\" href=\"/led2on\">ON</a>\n";}

ptr +="</body>\n";
ptr +="</html>\n";
return ptr;
}

Ketiga, upload program ke Nodemcu. Jangan lupa sesuaikan board dan portnya

keempat, setelah program selesai di upload lalu buka serial monitor (Jika hasil tidak sama dengan gambar dibawah ini coba reset Nodemcu dengan cara menekan tombol reset)