Dasar ESP8266 - Web Server Internal

Halo sobat Nanobot, pada postingan ini kita akan belajar membuat web server internal di dalam ESP8266. Web server ini berfungsi sebagai User Interface dari alat yang kita buat bisa untuk mengatur perintah alat atau hanya sebagai tampilan saja. Tertarik membuatnya? Mari kita buat
IoTqu: Membangun Server Web menggunakan ESP8266

Apa itu web server?
Web Server adalah layanan yang berfungsi sebagai penerima permintaan yang dikirimkan melalui browser, kemudian memberikan tanggapan dalam bentuk halaman situs atau lebih umum disebut HTML
Pada percobaan ini perangkat yang dibutuhkan adalah 
  1. NodeMcu (Dapat dibeli di toko kami, KLIK DISINI )
  2. Shield NodeMcu (Dapat dibeli di toko kami, KLIK DISINI)
  3. Kabel data dengan port micro USB (Dapat dibeli di toko kami, KLIK DISINI )
  4. Laptop
Berikut ini adalah programnya 

/* Tutorial Web server internal ESP8266
 * Dibuat oleh : Nanobot Workshop
 * nanobotworkshop.blogspot.com
 */
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>   //Library Web Server pada ESP8266

const char* ssid = "xxxx";      //Ubah sesuai WiFi yang digunakan
const char* password = "xxxxxx";     //Ubah sesuai WiFi yang digunakan

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

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

// Konfigurasi WiFi
  Serial.println();
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);

  WiFi.mode(WIFI_STA);                   
  WiFi.begin(ssid, password);             
 
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.println("WiFi connected");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());

// Membuat tampilan Webpage
  server.on("/", []() {
    server.send(200, "text/plain", "Ini tampilan awal web server kita");
  });

// Bagian ini opsional jika ingin membuat page lain
  server.on("/kedua", []() {
    server.send(200, "text/plain", "Ini tampilan halaman lain");
  });

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

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

Langkah percobaan :
Pertama, masukkan program ke dalam Arduino IDE
Gambar 1. Program dalam Arduino IDE

Kedua, Upload program ke NodeMcu. Jangan lupa atur board ke NodeMcu dan sesuaikan port nya
Gambar 2. Pengaturan Board dan Port

Ketiga, Buka serial monitor lalu perhatikan IP address yang muncul
Gambar 3. IP address di serial monitor

Keempat, buka browser dan ketik IP address tersebut maka browser akan menampilkan web server yang sudah kita buat
Gambar 4. Tampilan awal web server

Kelima, jika kita tambahkan "/kedua" dibelakang IP address maka kita akan masuk ke halaman lainnya
Gambar 5. Tampilan web kedua


Mudah bukan? Jika kalian ingin menampilkan web server yang lebih bagus silahkan belajar tentang HTML dan CSS
Sekian tutorial web server ini, jika ada kesulitan silahkan komentar dibawah yaa

Komentar

Postingan populer dari blog ini