ESP8266 Arduino IDE - Build Simple Web Server

Hallo Warrior, pada pembahasan kali ini kita akan membahas mengenai cara membuat webserver di perangkat esp8266 maupun nodemcu. Nantinya kita akan dapat mengakses alamat ip address dari esp8266 dan menampilkan sebuah text di browser yang kita gunakan.

Pada bagian ini kita hanya akan membahas pembuatan webserver secara simple saja, dimana yang akan ditampilkan hanyalah berupa text. Pada bagian berikutnya barulah kita akan membahas pengembangannya, misalkan menghidupkan led melalui webserver esp8266.

Apakah Web Server itu ?

Webserver (paladen web) merupakan perangkat keras maupun perangkat lunak yang menyediakan akses kepada pengguna melalui protokol komunikasi HTTP maupun HTTPS. Ketika kita mengakses alamat web server tersebut, webserver nantinya akan menerima permintaan yang kita kirim melalui web browser, lalu akan membalas permintaan tersebut kedalam bentuk situs web dalam dokumen HTML.

Begitulah pengertian dari cara kerja webserver, kita bisa lihat contoh ilustrasi cara kerjanya seperti berikut ini.

Praktek

Persiapan Perangkat

Persiapan yang perlu dilakukan pada percobaan ini tidaklah banyak, kita hanya perlu menyiapkan perangkat ESP8266 maupun NodeMCU yang akan kita gunakan untuk disisipkan program webserver.

Sketch Program

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

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

ESP8266WebServer server(80);            // Setup Webserver

// Setup main page ---------------------------------------------------
void handleRoot() {
  server.send(200, "text/plain", "Hello Para Warrior IoT !");
}

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

// Mengatur WiFi ----------------------------------------------------------
  WiFi.mode(WIFI_STA);                   // Mode Station
  WiFi.begin(ssid, password);            // Mencocokan SSID dan Password
  Serial.println("");

  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());

// Menjalankan Main Webserver ---------------------------------------------
  server.on("/", handleRoot);       //Menjalankan Main Page

// Menjalankan Status Page ------------------------------------------------
// Bangian ini hanyalah Optional Saja,
// Ibarat situs selalu ada web lain didalamnya
  server.on("/status", []() {
    server.send(200, "text/plain", "Ini adalah Page Status Aktif");
  });

// Menjalankan Service Web Server -----------------------------------------
  server.begin();
  Serial.println("Server dijalankan");
}

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

#include <ESP8266WiFi.h>

#include <ESP8266WebServer.h>

const char* ssid = "warriornux.com"; // Nama AP/Hotspot

const char* password = "1234567890"; // Password AP/Hotspot

ESP8266WebServer server(80); // Setup Webserver

// Setup main page ---------------------------------------------------

void handleRoot() {

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

}

void setup(void) {

Serial.begin(115200);

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

WiFi.mode(WIFI_STA); // Mode Station

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

Serial.println("");

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());

// Menjalankan Main Webserver ---------------------------------------------

server.on("/", handleRoot); //Menjalankan Main Page

// Menjalankan Status Page ------------------------------------------------

// Bangian ini hanyalah Optional Saja,

// Ibarat situs selalu ada web lain didalamnya

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

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

});

// Menjalankan Service Web Server -----------------------------------------

server.begin();

Serial.println("Server dijalankan");

}

void loop(void) {

server.handleClient();

}

Hasil Testing

Setelah melakukan upload program pada perangkat ESP8266, kita bisa melihat IP Address yang didapatkan oleh ESP8266 tersebut dari wifi yang kita gunakan seperti berikut.

Disana kita bisa lihat bahwa address yang esp8266 dapatkan adalah 192.168.43.202, sekarang kita coba akses alamat tersebut pada web browser dan lihat hasilnya.

Begitulah hasil dari webserver yang sudah kita buat tadi, untuk mengaksesnya hanya perlu memanggil ip dari esp8266 saja. Dan apabila ingin mengakses halaman status kita hanya perlu menambahkan /status dibelakang alamat ip address dan munculah hasilnya.

Kesimpulan

Dari percobaan diatas kita dapat menyimpulkan bahwa dengan menggunakan perangkat esp8266 kita sudah dapat membuat sebuah webserver sederhana, kita hanya perlu mengakses alamat ip adress dari persangkat esp8266 tersebut. web yang ditampilkan tidak hanya main page saja akan tetapi dengan page yang lain yang tinggal kita masukan saja halamannya dan diakses dengan /lamanlainnya.

Sekian pembasan dari webserver yang sudah kami sajikan, semoga materi ini bisa membantu kalian dalam project yang sedang dikerjakan. Selain materi ini adakah materi lain yang ingin kalian dapatkan ? jika ada tulis dikolom komentar Oke.

Referensi

https://id.wikipedia.org/wiki/Server_web
https://www.niagahoster.co.id/blog/web-server-adalah/

Tresna Widiyaman

Founder of Warriornux.
Sarjana Pendidikan Teknik Elektro (Telekomunikasi) from Universitas Pendidikan Indonesia. Mikrotik Certified Network Associate (MTCNA). Linux User, and IoT Activist.

Latest posts by Tresna Widiyaman (see all)

ESP8266 Arduino IDE – Build Simple Web Server - April 16, 2019
Perbedaan Modul ESP8266 & ESP32 - March 26, 2019
ESP8266 Arduino IDE – Mesh Network dengan PainlessMesh - March 19, 2019