Tutorial ESP 8266 12 E NodeMCU untuk Pemula - Menyalakan Lampu LED lewat Browser

Halo teman-teman!

Mau belajar mengirimkan data melalui Internet?

Mengendalikan perangkat dari jarak jauh?

Memantau informasi seperti suhu, kelembapan, kecukupan cahaya dan sebagainya secara jarak jauh?

Pelajari modul NodeMCU ESP8266 12 E. Dalam video ini, kita akan mengendalikan sebuah lampu LED yang disambungkan ke NodeMCU melalui browser. Dalam video ini, saya menjelaskan:

komponen-komponen penting NodeMCU
Bagaimana kita bisa memasang NodeMCU pada breadboard
PIN-PIN penting pada NodeMCU yang perlu diperhatikan oleh pemula yang ingin mempelajari NodeMCU
Dasar-dasar HyperText Markup Language (HTML), Bahasa yang digunakan untuk membuat website
Cara menginstal board manager untuk ESP8266
kode program

// Protus Tanuhandaru
// www.progresstech.co.id
// www.karyaone.co.id

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

const char* ssid = "Nama SSID"; // Variabel nama SSID
const char* password = "Password SSID"; // Variable password SSID

ESP8266WebServer server(80); // Deklarasi server dengan port 80

uint8_t pinLED = D5; // D5 atau GPIO 14 sebagai PIN LED
bool statusLED = LOW; // Nilai awal LED adalah 0

void setup() {
  Serial.begin(115200); // Komunikasi serial Baud Rate 115200
  delay(100); 
  pinMode(pinLED, OUTPUT); // Membuat PIN LED sebagai output

  Serial.println("Menghubungi ");
  Serial.println(ssid);
  WiFi.begin(ssid, password); // Otentifikasi sambungan Wifi

  // Mengecek apakah Wifi tersambung
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi tersambung..!");
  Serial.print("Nomor IP: ");  Serial.println(WiFi.localIP()); // Nomor IP Modul

  // Status LED 
  server.on("/", tersambung);
  server.on("/ledmenyala", LED_menyala);
  server.on("/ledmati", LED_mati);
  server.onNotFound(tidak_ditemukan);
  server.begin();
  Serial.println("Memulai HTTP server");
}

// Fungsi untuk semua status LED
void tersambung() {
  statusLED = LOW;
  server.send(200, "text/html", kirimHTML(statusLED)); 
}

void LED_menyala() {
  statusLED = HIGH;
  server.send(200, "text/html", kirimHTML(statusLED)); 
}

void LED_mati() {
  statusLED = LOW;
  server.send(200, "text/html", kirimHTML(statusLED)); 
}

void tidak_ditemukan(){
  server.send(404, "text/plain", "Halaman tidak ditemukan");
}

// Fungsi untuk mengemas kode HTML yang dikembalikan sebagai string
String kirimHTML(uint8_t statusLED){
  String konten = "<html>\n";
  konten +="<head>\n";
  konten +="<title>LED Control</title>\n";
  konten +="</head>\n";
  konten +="<body>\n";
  konten +="<h1 style=\"font-size:100px\">Mengendalikan LED</h1>\n";
  
  if(statusLED){
   konten +="<p style=\"font-size:80px\">Status LED: ON</p>\n";
   konten +="<a href=\"/ledmati\">\n";
   konten +="<button type=\"button\" style=\"font-size:150px\">OFF</button>\n";
   konten +="</a>\n";}
  else
  {konten +="<p style=\"font-size:80px\">Status LED: OFF</p>\n";
   konten +="<a href=\"/ledmenyala\">\n";
   konten +="<button type=\"button\" style=\"font-size:150px\">ON</button>\n";
   konten +="</a>\n";
  }

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

void loop() {
  server.handleClient();
  if(statusLED)
  {
    digitalWrite(pinLED, HIGH);
  } else {
    digitalWrite(pinLED, LOW);
  }
}

Semoga bermanfaat!

Referensi Pembelajaran Markup HTML:

https://www.w3schools.com/html/html_intro.asp

GitHub ESP8266: https://github.com/esp8266/arduino

Dokumentasi ESP8266 Web Server: https://links2004.github.io/Arduino/d3/d58/class_e_s_p8266_web_server.html

Kode program tutorial ini dapat diakses di link berikut : https://www.progresstech.co.id/blog/tutorial-esp8266-nodemcu-menyalakan-led-lewat-browser/

Tutorial ESP 8266 12 E NodeMCU untuk Pemula – Menyalakan Lampu LED lewat Browser

Leave a Reply Cancel reply