Panduan Lengkap Membuat Web Server NodeMCU ESP8266 Menggunakan Arduino IDE

Dalam beberapa tahun terakhir, ESP8266 menjadi sorotan dalam proyek-proyek IoT dan WiFi. Modul WiFi berbiaya rendah ini, dengan sedikit usaha ekstra, dapat diprogram untuk menjalankan web server mandiri.

 

Apa itu Web Server dan Bagaimana Cara Kerjanya?

Web server adalah tempat halaman web disimpan, diproses, dan disajikan kepada web klien. Web klien hanyalah peramban web yang kita gunakan di komputer dan ponsel. Web klien dan web server berkomunikasi menggunakan protokol khusus yang dikenal sebagai Protokol Transfer Hiperteks (HTTP).

Dalam protokol ini, klien memulai percakapan dengan mengirimkan permintaan HTTP untuk halaman web tertentu. Setelah itu, server mengirimkan kembali konten halaman web tersebut atau pesan kesalahan jika tidak dapat menemukannya (seperti Kesalahan 404 yang terkenal).

 

Mode Operasi ESP8266

 

Salah satu fitur ESP8266 yang paling bermanfaat adalah kemampuannya untuk tidak hanya terhubung ke jaringan WiFi yang ada dan bertindak sebagai Server Web, tetapi juga untuk membuat jaringannya sendiri, yang memungkinkan perangkat lain dapat terhubung langsung dan mengakses halaman web. Hal ini dimungkinkan karena ESP8266 dapat beroperasi dalam tiga mode, yaitu mode Stasiun (STA), mode Titik Akses Lunak (AP), dan keduanya secara bersamaan.

1. Mode Stasiun (STA)

Dalam mode Stasiun (STA), ESP8266 terhubung ke jaringan WiFi yang ada (jaringan yang dibuat oleh router nirkabel Anda).

 

Dalam mode STA, ESP8266 mendapatkan alamat IP dari router nirkabel yang terhubung dengannya. Dengan alamat IP ini, ESP8266 dapat menyiapkan web server dan menyajikan halaman web ke semua perangkat yang terhubung di jaringan WiFi yang ada.

2. Mode Titik Akses Lunak (AP)

Dalam mode Titik Akses (AP), ESP8266 menyiapkan jaringan WiFi-nya sendiri dan bertindak sebagai hub (seperti router WiFi) untuk satu atau beberapa stasiun.

Namun, tidak seperti router WiFi, ESP8266 tidak memiliki antarmuka ke jaringan kabel. Oleh karena itu, mode operasi ini disebut Titik Akses Lunak (soft-AP). Selain itu, maksimal lima stasiun dapat terhubung secara bersamaan.

 

Dalam mode AP, ESP8266 membuat jaringan WiFi baru dan memberinya SSID (nama jaringan) serta alamat IP. Dengan alamat IP ini, ESP8266 dapat menyajikan halaman web ke semua perangkat yang terhubung.

 

Menyambungkan LED ke ESP8266

 

Setelah kita memahami dasar-dasar cara kerja server web dan mode-mode yang dapat digunakan ESP8266 untuk membuatnya, saatnya menghubungkan beberapa LED ke ESP8266 yang ingin kita kendalikan melalui WiFi.

Awali dengan menempatkan NodeMCU pada papan breadboard Anda, pastikan setiap sisi papan berada di sisi yang berbeda. Selanjutnya, hubungkan dua LED ke GPIO digital D6 dan D7 menggunakan resistor pembatas arus 220Ω.

Setelah selesai, Anda akan mendapatkan sesuatu yang tampak seperti gambar di bawah ini.

Ide di Balik Penggunaan Web Server ESP8266 untuk Mengontrol Berbagai Hal

 

Anda mungkin bertanya-tanya, "Bagaimana cara mengontrol berbagai hal dari web server yang hanya memproses dan menyajikan halaman web?". Sangat mudah. ​​Kita akan mengontrol berbagai hal dengan mengunjungi URL tertentu. Saat Anda memasukkan URL ke peramban web, peramban akan mengirimkan permintaan HTTP (juga dikenal sebagai permintaan GET) ke web server. Web server bertanggung jawab untuk menangani permintaan ini.

 

Misalkan Anda memasukkan URL seperti http://192.168.1.1/ledon ke peramban. Peramban akan mengirimkan permintaan HTTP ke ESP8266. Ketika ESP8266 menerima permintaan ini, mikrokontroler tersebut mengenali bahwa pengguna ingin menyalakan LED. Jadi, ESP8266 akan menyalakan LED dan mengirimkan halaman web dinamis ke peramban yang menampilkan status LED sebagai "menyala". Cukup mudah, bukan?

 

Mengonfigurasi Server Web ESP8266 dalam Mode Access Point (AP)

 

Contoh ini menunjukkan cara mengonfigurasi Web Server ESP8266 dalam mode Access Point (AP) dan menyajikan halaman web ke klien mana pun yang terhubung. Untuk memulai, hubungkan ESP8266 Anda ke komputer dan jalankan sketsa. Kemudian kita akan melihatnya secara lebih rinci.

#include <ESP8266WiFi.h>

#include <ESP8266WebServer.h>

/* Put your SSID & Password */

const char* ssid = "NodeMCU";  // Enter SSID here

const char* password = "12345678";  //Enter Password here

/* Put IP Address details */

IPAddress local_ip(192,168,1,1);

IPAddress gateway(192,168,1,1);

IPAddress subnet(255,255,255,0);

ESP8266WebServer server(80);

uint8_t LED1pin = D7;

bool LED1status = LOW;

uint8_t LED2pin = D6;

bool LED2status = LOW;

void setup() {

  Serial.begin(115200);

  pinMode(LED1pin, OUTPUT);

  pinMode(LED2pin, OUTPUT);

  WiFi.softAP(ssid, password);

  WiFi.softAPConfig(local_ip, gateway, subnet);

  delay(100);

  

  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.onNotFound(handle_NotFound);

  

  server.begin();

  Serial.println("HTTP server started");

}

void loop() {

  server.handleClient();

  if(LED1status)

  {digitalWrite(LED1pin, HIGH);}

  else

  {digitalWrite(LED1pin, LOW);}

  

  if(LED2status)

  {digitalWrite(LED2pin, HIGH);}

  else

  {digitalWrite(LED2pin, LOW);}

}

void handle_OnConnect() {

  LED1status = LOW;

  LED2status = LOW;

  Serial.println("GPIO7 Status: OFF | GPIO6 Status: OFF");

  server.send(200, "text/html", SendHTML(LED1status,LED2status)); 

}

void handle_led1on() {

  LED1status = HIGH;

  Serial.println("GPIO7 Status: ON");

  server.send(200, "text/html", SendHTML(true,LED2status)); 

}

void handle_led1off() {

  LED1status = LOW;

  Serial.println("GPIO7 Status: OFF");

  server.send(200, "text/html", SendHTML(false,LED2status)); 

}

void handle_led2on() {

  LED2status = HIGH;

  Serial.println("GPIO6 Status: ON");

  server.send(200, "text/html", SendHTML(LED1status,true)); 

}

void handle_led2off() {

  LED2status = LOW;

  Serial.println("GPIO6 Status: 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;

}

 

Mengakses Web Server dalam Mode Access Point

 

Setelah mengunggah sketsa, buka Serial Monitor pada 115200 baud dan tekan tombol RESET pada ESP8266. Jika semuanya baik-baik saja, akan muncul pesan "Server HTTP dimulai".

Sekarang, siapkan ponsel, laptop, atau perangkat lain yang dapat terhubung ke jaringan WiFi, dan cari jaringan bernama "NodeMCU". Hubungkan ke jaringan menggunakan kata sandi 12345678.

 

Setelah terhubung ke jaringan NodeMCU AP Anda, buka peramban dan navigasikan ke 192.168.1.1. ESP8266 akan menampilkan halaman web yang menampilkan status LED dan tombol saat ini. Pada saat yang sama, Anda dapat memeriksa serial monitor untuk melihat status pin GPIO ESP8266.

 

 

 

 

Sekarang, sambil memperhatikan URL, klik tombol untuk menyalakan LED1. Setelah tombol diklik, ESP8266 akan menerima permintaan URL /led1on. Kemudian, ESP8266 akan menyalakan LED1 dan menampilkan halaman web dengan status LED yang diperbarui. ESP8266 juga akan mencetak status pin GPIO pada monitor serial.

 

Anda dapat menguji tombol LED2 untuk melihat apakah fungsinya sama.

Mari kita lihat lebih dekat kode tersebut untuk melihat cara kerjanya sehingga Anda dapat memodifikasinya sesuai kebutuhan.

Penjelasan Kode Terperinci

Sketsa dimulai dengan menyertakan pustaka ESP8266WiFi.h. Pustaka ini berisi metode khusus ESP8266 yang kami gunakan untuk terhubung ke jaringan. Setelah itu, kami menyertakan pustaka ESP8266WebServer.h, yang berisi beberapa metode yang akan membantu kami dalam mengonfigurasi server dan menangani permintaan HTTP yang masuk tanpa perlu mengkhawatirkan detail implementasi tingkat rendah.

 

#include <ESP8266WiFi.h>

#include <ESP8266WebServer.h>

 

Karena kita mengonfigurasi server web ESP8266 dalam mode Access Point (AP), server tersebut akan membuat jaringan WiFi-nya sendiri. Jadi, kita perlu mengatur SSID, kata sandi, alamat IP, subnet mask IP, dan gateway IP.

 

/* Put your SSID & Password */

const char* ssid = "NodeMCU";  // Enter SSID here

const char* password = "12345678";  //Enter Password here

/* Put IP Address details */

IPAddress local_ip(192,168,1,1);

IPAddress gateway(192,168,1,1);

IPAddress subnet(255,255,255,0);

Setelah itu, kita membuat objek pustaka ESP8266 Web Server agar kita dapat mengakses fungsinya. Konstruktor objek ini menerima port yang akan didengarkan oleh server sebagai parameter. Karena HTTP menggunakan port 80 secara default, kita akan menggunakan nilai ini. Hal ini memungkinkan kita untuk terhubung ke server tanpa menentukan port di URL.

 

// declare an object of ESP8266WebServer library

ESP8266WebServer server(80);

 

Selanjutnya, kami mendeklarasikan pin GPIO NodeMCU tempat LED terhubung, serta status awalnya.

 

uint8_t LED1pin = D7;

bool LED1status = LOW;

uint8_t LED2pin = D6;

bool LED2status = LOW;

 

Di Dalam Fungsi setup()

Pada fungsi setup(), konfigurasi awal untuk server HTTP dilakukan. Tahap pertama mencakup inisialisasi komunikasi serial sebagai sarana debugging, diikuti dengan pengaturan pin GPIO yang diperlukan agar beroperasi sebagai OUTPUT.

 

Serial.begin(115200);

pinMode(LED1pin, OUTPUT);

pinMode(LED2pin, OUTPUT);

 

Selanjutnya, dilakukan konfigurasi *soft access point* untuk membentuk jaringan Wi-Fi baru dengan menetapkan SSID, kata sandi, alamat IP, subnet mask, serta gateway yang akan digunakan.

WiFi.softAP(ssid, password);

WiFi.softAPConfig(local_ip, gateway, subnet);

delay(100);

 

Untuk memproses permintaan HTTP yang masuk, diperlukan penetapan fungsi yang akan dijalankan ketika URL tertentu diakses. Hal ini dilakukan menggunakan metode `.on()`, yang menerima dua parameter: jalur URL relatif dan nama fungsi yang akan dieksekusi saat jalur tersebut dipanggil. Sebagai contoh, baris pertama pada cuplikan kode menunjukkan bahwa ketika server menerima permintaan HTTP pada jalur root (`/`), fungsi `handle_OnConnect()` akan dijalankan. Perlu diperhatikan bahwa jalur yang digunakan merupakan URL relatif. Dengan prinsip yang sama, empat jalur URL tambahan harus didefinisikan untuk menangani dua status kendali LED yang tersedia.

 

server.on("/", handle_OnConnect);

server.on("/led1on", handle_led1on);

server.on("/led1off", handle_led1off);

server.on("/led2on", handle_led2on);

server.on("/led2off", handle_led2off);

 

Kita perlu menentukan respons server ketika klien mengakses URL yang tidak didefinisikan melalui `server.on()`. Dalam kondisi tersebut, server harus mengirimkan pesan galat 404 (*Page Not Found*). Untuk mengimplementasikannya, digunakan metode `server.onNotFound()` yang akan menangani seluruh permintaan ke jalur yang tidak terdaftar.

 

server.onNotFound(handle_NotFound);

 

Sekarang, untuk memulai server, kita memanggil metode begin() dari objek server.

 

server.begin();

Serial.println("HTTP server started");

Di Dalam Fungsi Loop()

Permintaan HTTP yang diterima diproses di dalam fungsi loop(). Pada tahap ini, metode `handleClient()` dari objek server dipanggil untuk menangani setiap permintaan yang masuk. Selain itu, perubahan status LED juga dilakukan sesuai dengan instruksi yang diterima dari klien.

void loop() {

  server.handleClient();

  if(LED1status)

  {digitalWrite(LED1pin, HIGH);}

  else

  {digitalWrite(LED1pin, LOW);}

  

  if(LED2status)

  {digitalWrite(LED2pin, HIGH);}

  else

  {digitalWrite(LED2pin, LOW);}

}

 

Sekarang kita perlu mendefinisikan fungsi `handle_OnConnect()`, yang sebelumnya telah dihubungkan ke URL root (`/`) melalui `server.on()`. Fungsi ini diawali dengan mengatur kedua LED ke kondisi LOW sebagai status awal, kemudian status tersebut dicatat melalui *Serial Monitor* untuk keperluan debugging.

 

Untuk memberikan respons terhadap permintaan HTTP, digunakan metode `send()`. Meskipun metode ini memiliki beberapa variasi parameter, bentuk dasarnya memerlukan tiga elemen: kode respons HTTP, tipe konten, dan isi respons.

 

Pada pemanggilan `send()` ini, parameter pertama yang diberikan adalah kode status 200, yang menandakan respons OK. Selanjutnya, tipe konten ditetapkan sebagai `"text/html"`, dan isi respons dihasilkan oleh fungsi `SendHTML()`, yang bertugas membangun halaman HTML dinamis berisi informasi status LED.

void handle_OnConnect() 

{

  LED1status = LOW;

  LED2status = LOW;

  Serial.println("GPIO7 Status: OFF | GPIO6 Status: OFF");

  server.send(200, "text/html", SendHTML(LED1status,LED2status)); 

}

Demikian pula, kami menulis lima fungsi lagi untuk menangani permintaan LED ON/OFF dan halaman Error 404.

 

void handle_led1on() {

  LED1status = HIGH;

  Serial.println("GPIO7 Status: ON");

  server.send(200, "text/html", SendHTML(true,LED2status)); 

}

void handle_led1off() {

  LED1status = LOW;

  Serial.println("GPIO7 Status: OFF");

  server.send(200, "text/html", SendHTML(false,LED2status)); 

}

void handle_led2on() {

  LED2status = HIGH;

  Serial.println("GPIO6 Status: ON");

  server.send(200, "text/html", SendHTML(LED1status,true)); 

}

void handle_led2off() {

  LED2status = LOW;

  Serial.println("GPIO6 Status: OFF");

  server.send(200, "text/html", SendHTML(LED1status,false)); 

}

void handle_NotFound(){

  server.send(404, "text/plain", "Not found");

}

Menampilkan Halaman Web HTML

Setiap kali web server ESP8266 menerima permintaan dari web klien, fungsi sendHTML() akan menghasilkan halaman web. Fungsi ini hanya menggabungkan kode HTML menjadi string panjang dan kembali ke fungsi server.send() yang telah dibahas sebelumnya. Fungsi ini menggunakan status LED sebagai parameter untuk menghasilkan konten HTML secara dinamis. Teks pertama yang harus selalu Anda kirim adalah deklarasi <!DOCTYPE>, yang menunjukkan bahwa kita sedang mengirimkan kode HTML.

 

String SendHTML(uint8_t led1stat,uint8_t led2stat){

String ptr = "<!DOCTYPE html> <html>\n";

Elemen viewport <meta> membuat halaman web responsif, memastikan tampilannya bagus di semua perangkat. Tag judul menentukan judul halaman.

 

ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";

ptr +="<title>LED Control</title>\n";

Menata Halaman Web

Selanjutnya, CSS digunakan untuk mengatur gaya tombol serta tata letak keseluruhan halaman web. Font **Helvetica** diterapkan sebagai jenis huruf utama, dan elemen konten dikonfigurasi agar ditampilkan sebagai *inline-block* dengan posisi yang diratakan ke tengah.

 

ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";

Bagian kode berikut mengonfigurasi gaya visual untuk elemen *body*, *h1*, *h3*, dan *p*, mencakup pengaturan warna, jenis huruf, serta margin yang digunakan pada masing-masing tag.

 

ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";

ptr +="p {font-size: 14px;color: #888;margin-bottom: 10px;}\n";

Tombol pada halaman web juga diberikan style khusus menggunakan berbagai properti, seperti warna, dimensi, margin, dan parameter visual lainnya. Selain itu, selektor `:active` diterapkan untuk mengubah tampilan tombol ketika berada dalam kondisi ditekan oleh pengguna.

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";

Mengatur Judul Halaman Web

Selanjutnya, judul halaman web akan diatur. Anda dapat mengubah teks ini menjadi teks apa pun yang sesuai untuk aplikasi Anda.

 

ptr +="<h1>ESP8266 Web Server</h1>\n";

ptr +="<h3>Using Access Point(AP) Mode</h3>\n";

Menampilkan Tombol dan Statusnya

Pernyataan if digunakan untuk memperbarui status tombol dan LED secara dinamis.

 

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";}

Mengonfigurasi Server Web ESP8266 dalam Mode WiFi Station (STA)

Kita berlanjut pada contoh berikut, yang mendemonstrasikan cara mengonfigurasi server web pada ESP8266 dalam mode Stasiun (STA) untuk menyajikan halaman web kepada klien yang terhubung pada jaringan Wi-Fi yang sudah tersedia. Sebelum sketsa diunggah, beberapa penyesuaian perlu dilakukan agar program dapat berjalan sebagaimana mestinya. Untuk memungkinkan ESP8266 terhubung ke jaringan tersebut, dua variabel yang berisi kredensial Wi-Fi harus diperbarui sesuai dengan SSID dan kata sandi jaringan Anda.

 

 

Setelah selesai, lanjutkan dan coba sketsa tersebut.

 

#include <ESP8266WiFi.h>

#include <ESP8266WebServer.h>

/*Put your SSID & Password*/

const char* ssid = "YourNetworkName";  // Enter SSID here

const char* password = "YourPassword";  //Enter Password here

ESP8266WebServer server(80);

uint8_t LED1pin = D7;

bool LED1status = LOW;

uint8_t LED2pin = D6;

bool LED2status = LOW;

void setup() {

  Serial.begin(115200);

  delay(100);

  pinMode(LED1pin, OUTPUT);

  pinMode(LED2pin, OUTPUT);

  Serial.println("Connecting to ");

  Serial.println(ssid);

  //connect to your local wi-fi network

  WiFi.begin(ssid, password);

  //check wi-fi is connected to wi-fi network

  while (WiFi.status() != WL_CONNECTED) {

  delay(1000);

  Serial.print(".");

  }

  Serial.println("");

  Serial.println("WiFi connected..!");

  Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

  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.onNotFound(handle_NotFound);

  server.begin();

  Serial.println("HTTP server started");

}

void loop() {

  server.handleClient();

  if(LED1status)

  {digitalWrite(LED1pin, HIGH);}

  else

  {digitalWrite(LED1pin, LOW);}

  

  if(LED2status)

  {digitalWrite(LED2pin, HIGH);}

  else

  {digitalWrite(LED2pin, LOW);}

}

void handle_OnConnect() {

  LED1status = LOW;

  LED2status = LOW;

  Serial.println("GPIO7 Status: OFF | GPIO6 Status: OFF");

  server.send(200, "text/html", SendHTML(LED1status,LED2status)); 

}

void handle_led1on() {

  LED1status = HIGH;

  Serial.println("GPIO7 Status: ON");

  server.send(200, "text/html", SendHTML(true,LED2status)); 

}

void handle_led1off() {

  LED1status = LOW;

  Serial.println("GPIO7 Status: OFF");

  server.send(200, "text/html", SendHTML(false,LED2status)); 

}

void handle_led2on() {

  LED2status = HIGH;

  Serial.println("GPIO6 Status: ON");

  server.send(200, "text/html", SendHTML(LED1status,true)); 

}

void handle_led2off() {

  LED2status = LOW;

  Serial.println("GPIO6 Status: 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 Station(STA) 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;

}

Mengakses Server Web dalam mode STA

Setelah mengunggah sketsa, buka Serial Monitor pada 115200 baud dan tekan tombol RESET pada ESP8266. Jika semuanya baik-baik saja, ESP8266 akan menampilkan alamat IP dinamis yang diperoleh dari router Anda serta pesan "Server HTTP dimulai".

 

Selanjutnya, buka peramban dan navigasikan ke alamat IP yang ditampilkan di serial monitor. NodeMCU akan menampilkan halaman web berisi status LED saat ini dan dua tombol untuk mengendalikannya. Pada saat yang sama, Anda dapat memeriksa monitor serial untuk melihat status pin GPIO NodeMCU.

Sekarang, sambil memperhatikan URL, klik tombol untuk menyalakan LED1. Setelah tombol diklik, ESP8266 akan menerima permintaan URL /led1on. Kemudian, ESP8266 akan menyalakan LED1 dan menampilkan halaman web dengan status LED yang diperbarui. ESP8266 juga akan mencetak status pin GPIO pada monitor serial.

 

Anda dapat menguji tombol LED2 untuk melihat apakah fungsinya sama.

Mari kita lihat lebih dekat kodenya untuk melihat cara kerjanya sehingga Anda dapat memodifikasinya sesuai kebutuhan.

Penjelasan Kode

Satu-satunya perbedaan antara kode ini dan kode sebelumnya adalah Anda tidak membuat jaringan WiFi sendiri, melainkan bergabung dengan jaringan yang sudah ada menggunakan fungsi WiFi.begin().

 

//connect to your local wi-fi network

  WiFi.begin(ssid, password);

Saat ESP8266 mencoba terhubung ke jaringan, Anda dapat menggunakan fungsi WiFi.status() untuk memeriksa status konektivitas.

 

//check wi-fi is connected to wi-fi network

  while (WiFi.status() != WL_CONNECTED) {

  delay(1000);

  Serial.print(".");

  }

Sebagai informasi, fungsi ini mengembalikan status berikut:

- WL_CONNECTED: saat terhubung ke jaringan Wi-Fi

- WL_NO_SHIELD: saat tidak ada perisai Wi-Fi

- WL_IDLE_STATUS: status sementara yang ditetapkan saat WiFi.begin() dipanggil dan tetap aktif hingga jumlah percobaan berakhir (menghasilkan WL_CONNECT_FAILED) atau koneksi dibuat (menghasilkan WL_CONNECTED)

- WL_NO_SSID_AVAIL: saat tidak ada SSID yang tersedia

- WL_SCAN_COMPLETED: saat pemindaian jaringan selesai

- WL_CONNECT_FAILED: saat koneksi gagal untuk semua percobaan

- WL_CONNECTION_LOST: saat koneksi terputus

- WL_DISCONNECTED: saat terputus dari jaringan

Setelah terhubung ke jaringan, fungsi WiFi.localIP() digunakan untuk mencetak alamat IP ESP8266.

 

Serial.println("");

Serial.println("WiFi connected..!");

Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

Perbedaan utama antara mode AP dan STA terletak pada cara perangkat terhubung ke jaringan: mode AP membentuk jaringan Wi-Fi baru, sedangkan mode STA bergabung dengan jaringan yang sudah tersedia. Dengan demikian, struktur kode untuk memproses permintaan HTTP dan menyajikan halaman web pada mode STA tetap sama seperti pada mode AP. Proses tersebut mencakup beberapa langkah berikut ini:

- Mendeklarasikan pin GPIO NodeMCU yang digunakan untuk mengendalikan LED

- Mendefinisikan sejumlah metode server.on() untuk memproses permintaan HTTP yang diterima

- Menetapkan metode server.onNotFound() sebagai penangan kesalahan HTTP 404

- Menulis fungsi kustom yang dijalankan ketika URL tertentu diakses

- Membuat struktur halaman HTML

- Menambahkan stylesheet untuk mengatur tampilan antarmuka

- Menyusun tombol pengendali serta menampilkan statusnya secara dinamis

 

 

 

 

 

 

 

 

Siap Untuk Membuat Proyek Impianmu Menjadi Kenyataan?

Klik di sini untuk chat langsung via WhatsApp dan dapatkan dukungan langsung dari tim ahli kami!