Open in app

Sign in

Write

Sign in

ESP32 Web Server

Tugus Ibram
7 min readMar 27, 2021

--

Another II2260 Project!

Halo semua! Kembali lagi bersama aku, Tugus :D

Overview

Nah seperti biasanya, minggu ini aku akan mencoba project baru nih yang masih melibatkan communication protocol dari ESP32. Pada blog sebelumnya, aku membahas tentang Bluetooth sebagai communication protocol yang ada di ESP32. Ternyata di ESP32, kita punya wireless communication protocol juga selain Bluetooth, yaitu dengan Wi-Fi!

Menurut wikipedia,

Wi-Fi (/ˈwaɪfaɪ/, juga ditulis Wifi atau WiFi) adalah sebuah teknologi yang memanfaatkan peralatan elektronik untuk bertukar data secara nirkabel (menggunakan gelombang radio) melalui sebuah jaringan komputer, termasuk koneksi Internet berkecepatan tinggi. Wi-Fi Alliance mendefinisikan Wi-Fi sebagai “produk jaringan area lokal nirkabel (WLAN) apapun yang didasarkan pada standar Institute of Electrical and Electronics Engineers (IEEE) 802.11”. Meski begitu, karena kebanyakan WLAN zaman sekarang didasarkan pada standar tersebut, istilah “Wi-Fi” dipakai dalam bahasa Inggris umum sebagai sinonim “WLAN”.

Jadi, sama seperti Bluetooth, Wifi adalah wireless communication yang memiliki range yang kecil, biasanya dari 5–20 meter. Namun, berbeda dari Bluetooth, Wifi memiliki data rate yang tinggi. Data rate tertinggi yang dijual di Amerika Serikat adalah 2000Mbps atau 2 Gigabit/detik.

Mau ngapain?

Jadi pada project ini, aku akan mencoba menggunakan Wifi sebagai sebuah web server untuk melakukan pertukaran data antara host (ESP32) dan client (smartphone yang terhubung dengan internet). Implementasinya dengan memasang 2 LED yang terhubung dengan ESP32 dan 2 buah GPIO, lalu mencoba menyalakannya dengan sebuah tombol yang tersedia pada web server pada ESP32. Bingung? Sama! Tapi supaya gak bingung, yuk kita lihat dulu apa aja yang dibutuhkan!

Making the Project

Alat yang dibutuhkan

  1. ESP32
  2. Arduino IDE
  3. 2 buah LED Bulb
  4. 4 Male-to-male Jumper Cables
  5. 2 Resistor 330k Ohm
  6. Smartphone yang terkoneksi dengan Wifi (akan dibahas lebih lanjut)

Skema

Skema untuk Web Server

Pada skema diatas, kita menggunakan 2 LED yang terhubung dengan GPIO 26 dan GPIO 27. LED tersebut terkoneksi juga dengan GND melalui resistor.

https://youtu.be/pWP6gDlZQwk

Kode Program

Untuk menggunakan web server, gunakan kode dibawah ini:

// Load Wi-Fi library
#include <WiFi.h> // Replace with your network credentials
const char* ssid = "YOUR_WIFI_SSID";
const char* password = "YOUR_WIFI_PASSWORD";// Set web server port number to 80
WiFiServer server(80);// Variable to store the HTTP request
String header;// Auxiliar variables to store the current output state
String output26State = "off";
String output27State = "off";// Assign output variables to GPIO pins
const int output26 = 26;
const int output27 = 27;// Current time
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0; 
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;void setup() {
  Serial.begin(115200);
  // Initialize the output variables as outputs
  pinMode(output26, OUTPUT);
  pinMode(output27, OUTPUT);
  // Set outputs to LOW
  digitalWrite(output26, LOW);
  digitalWrite(output27, LOW);// Connect to Wi-Fi network with SSID and password
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  // Print local IP address and start web server
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
}void loop(){
  WiFiClient client = server.available();   // melacak clientif (client) {                             // jika terhubung
    currentTime = millis();
    previousTime = currentTime;
    Serial.println("New Client.");          // cetak serial monitor
    String currentLine = "";                // data dari client
    while (client.connected() && currentTime - previousTime <= timeoutTime) {  // loop while the client's connected
      currentTime = millis();
      if (client.available()) {             // ada bytes to read
        char c = client.read();             // read a byte, then
        Serial.write(c);                    // cetak serial monitor
        header += c;
        if (c == '\n') {                    // jika newline/enter
          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();
            
            // turns the GPIOs on and off
            if (header.indexOf("GET /26/on") >= 0) {
              Serial.println("GPIO 26 on");
              output26State = "on";
              digitalWrite(output26, HIGH);
            } else if (header.indexOf("GET /26/off") >= 0) {
              Serial.println("GPIO 26 off");
              output26State = "off";
              digitalWrite(output26, LOW);
            } else if (header.indexOf("GET /27/on") >= 0) {
              Serial.println("GPIO 27 on");
              output27State = "on";
              digitalWrite(output27, HIGH);
            } else if (header.indexOf("GET /27/off") >= 0) {
              Serial.println("GPIO 27 off");
              output27State = "off";
              digitalWrite(output27, LOW);
            }
            
            // Display the HTML web page
            client.println("<!DOCTYPE html><html>");
            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
            client.println("<link rel=\"icon\" href=\"data:,\">");
            // CSS to style the on/off buttons 
            // Feel free to change the background-color and font-size attributes to fit your preferences
            client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
            client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");
            client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
            client.println(".button2 {background-color: #555555;}</style></head>");
            
            // Web Page Heading
            client.println("<body><h1>ESP32 Web Server</h1>");
            
            // Display current state, and ON/OFF buttons for GPIO 26  
            client.println("<p>GPIO 26 - State " + output26State + "</p>");
            // If the output26State is off, it displays the ON button       
            if (output26State=="off") {
              client.println("<p><a href=\"/26/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/26/off\"><button class=\"button button2\">OFF</button></a></p>");
            } 
               
            // Display current state, and ON/OFF buttons for GPIO 27  
            client.println("<p>GPIO 27 - State " + output27State + "</p>");
            // If the output27State is off, it displays the ON button       
            if (output27State=="off") {
              client.println("<p><a href=\"/27/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/27/off\"><button class=\"button button2\">OFF</button></a></p>");
            }
            client.println("</body></html>");
            
            // The HTTP response ends with another blank line
            client.println();
            // Break out of the while loop
            break;
          } else { // if you got a newline, then clear currentLine
            currentLine = "";
          }
        } else if (c != '\r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }
      }
    }
    // Clear the header variable
    header = "";
    // Close the connection
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}

Namun jangan langsung upload kode ini. Pertama kita harus mengubah kode program pada bagian

const char* ssid = "YOUR_WIFI_SSID";
const char* password = "YOUR_WIFI_PASSWORD";

Menjadi sesuai dengan WiFi di rumah kalian masing-masing. Sisa kode dibawahnya merupakan kode untuk mempersiapkan koneksi HTTP.

WiFiServer server(80);

Pada kode ini, kita memasang port dari webserver menjadi port 80.

String header;

Variabel ini digunakan untuk menyimpan header dari HTTP request yang akan diberikan oleh smarphone

Pada bagian setup() kita akan menggunakan baud 115200 untuk debugging. Selain itu kita juga memasang GPIO26 dan GPIO27 sebagai pinmode output.

// Initialize the output variables as outputs
pinMode(output26, OUTPUT);
pinMode(output27, OUTPUT);

// Set outputs to LOW
digitalWrite(output26, LOW);
digitalWrite(output27, LOW);

Agar mengetahui keadaan ESP32 terhadap koneksi WiFi, kita harus mencetak keadaan ESP32.

// Connect to Wi-Fi network with SSID and password
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
  delay(500);
  Serial.print(".");
}
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();

Pada void loop , dilakukan fungsi utama dari aplikasi web server

WiFiClient client = server.available(); // Listen for incoming clients

Kode diatas melakukan listening terhadap client yang datang ke alamat.

if (client) { // If a new client connects,
  Serial.println("New Client."); // print a message out in the serial port
  String currentLine = ""; // make a String to hold incoming data from the client
  while (client.connected()) { // loop while the client's connected
    if (client.available()) { // if there's bytes to read from the client,
      char c = client.read(); // read a byte, then
      Serial.write(c); // print it out the serial monitor
      header += c;
      if (c == '\n') { // if the byte is a newline character
      // if the current line is blank, you got two newline characters in a row.
      / that's the end of the client HTTP request, so send a response:
        if (currentLine.length() == 0) {
        // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
        // and a content-type so the client knows what's coming, then a blank line:
          client.println("HTTP/1.1 200 OK");
          client.println("Content-type:text/html");
          client.println("Connection: close");
          client.println();

Kode ini dilakukan ketika server menerima client, lalu mencoba untuk mendengarkan dattat yang dikirim oleh client.

// turns the GPIOs on and off
if (header.indexOf("GET /26/on") >= 0) {
  Serial.println("GPIO 26 on");
  output26State = "on";
  digitalWrite(output26, HIGH);
} else if (header.indexOf("GET /26/off") >= 0) {
  Serial.println("GPIO 26 off");
  output26State = "off";
  digitalWrite(output26, LOW);
} else if (header.indexOf("GET /27/on") >= 0) {
  Serial.println("GPIO 27 on");
  output27State = "on";
  digitalWrite(output27, HIGH);
} else if (header.indexOf("GET /27/off") >= 0) {
  Serial.println("GPIO 27 off");
  output27State = "off";
  digitalWrite(output27, LOW);
}

Setelah if else statement adi, kodoe diatas digunakan untuk mengubah header HTTP yang didapatkan oleh server dari cliient menjadi perintah pada ESP32 untuk menyalakan dan mematikan LED pada GPIO yang tepat.

Selain kode itu, ada beberapa kode HTML yang digunakan untuk kepentingan desain website saat dibuka oleh client.

Eksekusi

Analisis

Project kali ini dapat dilakukan dengan mudah. Namun yang saya sadari, ketika kita mencoba mengakses web server tersebut ketika saya mencoba restart ESP32, web tersebut tidak valid lagi. Hal ini terjadi karena setiap kali ESP32 terkoneksi dengan sebuah WiFi, IP address yang dimilikinya akan berubah, sesuai dengan private IP address yang diberikan oleh DHCP Server pada WiFi router masing-masing. Ilmu ini saya dapatkan dari mata kuliah lain yaitu Jaringan Komputer. Code-wise saya sejujurnya belum paham bagian HTTP designingnya karena saya belum memiliki pengalaman dengan web programming.

Sekian dari saya, terima kasih sudah membaca!

Esp32 Programming
Esp32
Esp32 Tutorial
Web Server

--

--

Tugus Ibram
Tugus Ibram

Written by Tugus Ibram

1 Follower
5 Following

No responses yet

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams