ESP8266 Arduino IDE – LED Control dari Webserver Internal

Hallo Warrior, pada pembahasan ini kita akan coba untuk membuat sebuah webpage dari internal web server esp8266 yang berfungsi untuk mengontrol led yang terhubung pada NodeMCU ESP8266. Sehingga kita dapat mengidupkan dan mematikan led tersebut.

Pada artikel sebelumnya, kita juga sempat membahas mengenai cara membangun simple web server pada esp8266. Disana sudah dijelaskan secara detail mengenai webserver itu sendiri, kalian dapat mengaksesnya pada halaman berikut : Build Simple Web Server ESP8266.

Introduction

Sebenarnya pada pembahasan lama, kami sudah coba membahas mengenai control led/relay menggunakan esp8266. Akan tetapi pada sistem sebelumnya sedikit berbeda, karena tidak menggunakan webpage internal sehingga untuk menggunakannya kita harus memanggil alamat ip dan halaman untuk mematikan dan menghiupkan led.

Kalian dapat mengakses artikel tersebut pada halaman berikut : Led/Relay Control ESP8266

Akan tetapi berbeda dengan tutorial ini yang sistem kontrol led nya mengandalkan halaman webpage yang ada pada web server internal ESP8266, sehingga kita hanya perlu menekan tombol untuk menghidupkan dan mematikan led yang ada pada ESP8266.

Dengan menghubungkan perangkat laptop/handphone pada jaringan yang sama dengan NodeMCU ESP8266, lalu mengakses alamat IP Addressnya di browser, kita akan diberikan halaman untuk mengontrol led tersebut.

Praktek

Persiapan Perangkat

Berikut merupakan beberapa perangkat yang perlu disiapkan

1. NodeMCU/ESP8266
2. LED x 3 buah
3. Projectboard
4. Jumper

Rangkaian

Berikut adalah wiring dari rangkaian yang akan kita gunakan, disini saya coba sematkan dua rangkaian. Yaitu NodeMCU dan ESP12F.

Sketch Program

//------------------------------------------------
// Program From : www.warriornux.com
//------------------------------------------------

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

#define LED1 16
#define LED2 5
#define LED3 4

const char* ssid = "warriornux.com";       // Nama SSID AP/Hotspot
const char* password = "1234567890";    // Password Wifi

ESP8266WebServer server(80);      //Menyatakan Webserver pada port 80
String webpage;

void setup() {
  Serial.begin(115200);
  delay(10);

  pinMode(LED1, OUTPUT);
  pinMode(LED2, OUTPUT);
  pinMode(LED3, OUTPUT);

// Connect to WiFi network ------------------------------------------------
  Serial.println();
  Serial.print("Configuring access point...");

// Mengatur WiFi ----------------------------------------------------------
  WiFi.mode(WIFI_AP);                      // Mode Station
  WiFi.begin(ssid, password);               // Mencocokan SSID dan Password
    
// Print status Connect --------------------------------------------------- 
  Serial.println("IP address: ");
  Serial.println(WiFi.softAPIP());

// Isi dari Webpage -------------------------------------------------------
  webpage+= "<h1> Web Control ESP8266 Warriornux.com</h1>";
  webpage+= "<p>LED 1 : ";
  webpage+= "<a href=\"LED1ON\"\"><button>ON</button></a><a href=\"LED1OFF\"\"><button>OFF</button></a></p><br>";
  webpage+= "<p>LED 2 : ";
  webpage+= "<a href=\"LED2ON\"\"><button>ON</button></a><a href=\"LED2OFF\"\"><button>OFF</button></a></p><br>";
  webpage+= "<p>LED 3 : ";
  webpage+= "<a href=\"LED3ON\"\"><button>ON</button></a><a href=\"LED3OFF\"\"><button>OFF</button></a></p>";
          
// Membuat tampilan Webpage -----------------------------------------------
  server.on("/", []() {
    server.send(200, "text/html", webpage);
   });

// Bagian ini untuk merespon perintah yang masuk --------------------------
  server.on("/LED1ON", []() {
    server.send(200, "text/html", webpage);
    digitalWrite(LED1,HIGH);
    delay(1000);
  });
  server.on("/LED2ON", []() {
    server.send(200, "text/html", webpage);
    digitalWrite(LED2,HIGH);
    delay(1000);
  });
  server.on("/LED3ON", []() {
    server.send(200, "text/html", webpage);
    digitalWrite(LED3,HIGH);
    delay(1000);
  });
  server.on("/LED1OFF", []() {
    server.send(200, "text/html", webpage);
    digitalWrite(LED1,LOW);
    delay(1000);
  });
  server.on("/LED2OFF", []() {
    server.send(200, "text/html", webpage);
    digitalWrite(LED2,LOW);
    delay(1000);
  });
  server.on("/LED3OFF", []() {
    server.send(200, "text/html", webpage);
    digitalWrite(LED3,LOW);
    delay(1000);
  });

  server.begin();
  Serial.println("Webserver dijalankan");
}

void loop() {
   server.handleClient();
}

Hasil Percobaan

Setelah program berhasil kita upload, selanjutnya kita check keberhasilannya pada serial monitor. Hasilnya akan jadi seperti dibawah ini :

Setelah berhasil, koneksikan laptop/smartphone kita pada hotspot yang dibuat oleh NodeMCU ESP8266 tersebut. Lalu masukan alamat IP ESP8266 di browser (IP yang ada di serial monitor).

Sekarang kita hanya perlu menekan tombol off dan on untuk menghidupkan dan mematikan led yang terhubung pada ESP8266. Dengan ini control led melalui webpage web server esp8266 sudah berhasil.

Kesimpulan

Dengan menggunkan fasilitas web server yang ada pada ESP8266, kita dapat membuat sebuah halaman webpage untuk mengontrol led pada GPIO yang ada pada ESP8266. Dengan memanggil alamat IP dari ESP pada browser, kita sudah dapat menampilkan webpage control tersebut.