ESP8266 Arduino IDE - Build Simple Web Server

Hallo Warrior, pada pembahasan ini kita akan membahas tutorial bagaimana membuat sebuah webpage webserver internal pada ESP8266. Dimana nantinya kita dapat memanggil alamat ip dari ESP8266 di browser dan menampilkan halaman webpage didalamnya.

Introduction

Web Server merupakan layanan yang berfungsi sebagai penerima permintaan yang dikirimkan melalui browser, kemudian memberikan tanggapan permintaan dalam bentuk halaman situs web (webpage) atau lebih umumnya dalam dokumen HTML.

Saat mengambil halaman website, browser akan mengirimkan permintaan ke alamat server yang dituju, kemudian HTTP request akan dikirimkan ke web server lalu diproses. Setelah itu webserver mengirimkan HTTP Respon ke browser dan memprosesnya menjadi halaman situs web. Jika diilustrasikan maka akan seperti gambar dibawah ini.

Praktek

Persiapan Perangkat

Pada praktek ini kita hanya perlu menyiapkan perangkat NodeMCU atau ESP8266series lainnya untuk digunakan.

Sketch Program

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

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

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

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

// Connect to WiFi network ------------------------------------------------
  Serial.println();
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);

// Mengatur WiFi ----------------------------------------------------------
  WiFi.mode(WIFI_STA);                      // Mode Station
  WiFi.begin(ssid, password);               // Mencocokan SSID dan Password
    
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

// Print status Connect ---------------------------------------------------
  Serial.println("");
  Serial.println("WiFi connected");  
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());

// Membuat tampilan Webpage -----------------------------------------------
  server.on("/", []() {
    server.send(200, "text/plain", "Hello Para Warrior IoT");
  });

// Bagian ini opsional jika ingin membuat page lain ----------------------
  server.on("/status", []() {
    server.send(200, "text/plain", "Ini adalah Page Status Aktif");
  });

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

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

#include <ESP8266WiFi.h>

#include <ESP8266WebServer.h>

const char* ssid = "jenamonster"; // Nama SSID AP/Hotspot

const char* password = "1234567890"; // Password Wifi

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

void setup() {

Serial.begin(115200);

delay(10);

// Connect to WiFi network ------------------------------------------------

Serial.println();

Serial.print("Connecting to ");

Serial.println(ssid);

// Mengatur WiFi ----------------------------------------------------------

WiFi.mode(WIFI_STA); // Mode Station

WiFi.begin(ssid, password); // Mencocokan SSID dan Password

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

delay(500);

Serial.print(".");

}

// Print status Connect ---------------------------------------------------

Serial.println("");

Serial.println("WiFi connected");

Serial.println("IP address: ");

Serial.println(WiFi.localIP());

// Membuat tampilan Webpage -----------------------------------------------

server.on("/", []() {

server.send(200, "text/plain", "Hello Para Warrior IoT");

});

// Bagian ini opsional jika ingin membuat page lain ----------------------

server.on("/status", []() {

server.send(200, "text/plain", "Ini adalah Page Status Aktif");

});

server.begin();

Serial.println("Webserver dijalankan");

}

void loop() {

server.handleClient();

}

Setelah itu compile dan upload program pada perangkat NodeMCU/ESP8266 yang akan kalian jadikan web server. Program webserver ini berjalan sebagai web server station.

Hasil Percobaan

Serial Monitor

Setelah Program berhasil di upload, selanjutnya kita buka serial monitor untuk melihat IP Address yang dimiliki oleh perangkat NodeMCU/ESP8266 Seperti berikut.

Alamat IP diatas akan berubah-ubah setiap 3 hari sekali, apabila kalian ingin memastikan IP Addressnya fix maka kalian dapat mengunjungi tutorial berikut : Static IP Address ESP8266.

Browser

Selanjutnya untuk mengakses webpage pada webserver, kita hanya perlu membuka browser pada komputer/smartphone yang terkoneksi pada jaringan wifi yang sama. Selanjutnya panggil alamat IP yang ada pada serial monitor tadi.

Tampilan Main Webpage Web Server ESP8266

Selanjutnya kita coba mengakses webpage yang lain, yaitu status. Kita hanya perlu menambahkan /status pada ujung alamat ip addressnya, hasilnya akan seperti berikut.

Tampilan Webpage Status Web Server ESP8266

Kesimpulan

Dari hasil percobaan yang sudah kita lakukan, dapat kita lihat bahwa perangkat ESP8266 dapat membuat sebuah web server internal dan menampilkan webpage yang dapat kita akses melalui browser. Kita dapat membuat lebih dari satu halaman dalam webserver tersebut.

Referensi

https://www.niagahoster.co.id/blog/web-server-adalah/
Example Program Library ESP8266

ESP8266 Arduino IDE – Build Simple Web Server