Embedded System (ESP32 Project 8): Web Server

5 min readApr 2, 2023

Haloooo, Setelah sukses dengan project ke-7 yaitu Bluetooth Communication Protocol, kali ini aku akan membuat project ke-8 yaitu Web Server. Project kali ini aku akan menghubungkan ESP32 dengan web server sehingga dapat melakukan komunikasi dan akan menyebabkan LED menyala. Selain itu, kita akan menampilkan status LED nyala atau mati di tampilan website. Kita juga akan menampilkan temperatur dalam celcius, pressure, dan ketinggian. Sebelum lanjut ke projectnya, aku akan memberikan sedikit informasi mengenai web server itu sendiri.

Web server adalah program komputer yang berjalan di server dan berfungsi untuk menerima permintaan (request) dari klien (client) melalui protokol HTTP (Hypertext Transfer Protocol), kemudian memberikan respons (response) berupa halaman web kepada klien.

Itulah sedikit penjelasan mengenai web server yang bisa aku berikan, selanjutnya langsung aja kita ke projectnya!!!

TOOLS

ESP32 DOIT DEVKIT V1
Breadboard
Kabel jumper
Kabel Data Micro USB
Resistor 220 ohm
HP Android
LED
Sensor BMP280
Laptop/PC yang sudah terinstall Arduino IDE dan punya browser

Jika belum melakukan instalasi Arduino IDE, kamu dapat menginstalnya pada https://www.arduino.cc/en/software

Jangan lupa untuk melakukan setup Arduino IDE, jika belum silahkan untuk membaca pada postingan sebelumnya.

Berikut linknya! Embedded System (ESP32 Project 1): LED Blink

EXPERIMENT

Pada awal experiment, buatlah rangkaiannya terlebih dahulu.

Di experiment ini aku mencoba merangkai dan hasilnya adalah seperti berikut.

Sebelum melanjutkan melakukan experiment, perlu dipastikan bahwa kita telah memiliki Adafruit BMP280 Library.

Pada experiment kali ini aku telah membuat sebuah kode HTML dan CSS untuk menampilkan data pada web. Berikut adalah kode programnya.

// Load Wi-Fi library
#include <WiFi.h>

// Load BMP Library
#include <Wire.h>
#include <Adafruit_BMP280.h>

// Replace with your network credentials
const char* ssid = "apaya ?";
const char* password = "Mrcecep13";

// Set web server port number to 80
WiFiServer server(80);

// Variable to store the HTTP request
String header;

// LED
String output5State = "off"; // State LED variable
const int output5 = 5; // Assign output variables to GPIO pins

// BMP280
Adafruit_BMP280 bmp; // I2C
#define SEALEVELPRESSURE_HPA 1013.25 //nilai awal untuk pressure

// 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 LED  
  // Initialize the output variables as outputs
  pinMode(output5, OUTPUT);
  // Set LED in initialization
  digitalWrite(output5, LOW);

  // INITIALIZE BMP280
  unsigned status = bmp.begin(0x76);
  if (!status) {
    Serial.println(F("Could not find a valid BMP280 sensor, check wiring or try a different address!"));
    while (1) delay(10);
  }

  // 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();   // Listen for incoming clients

  if (client) {                             // If a new client connects,
    currentTime = millis();
    previousTime = currentTime;
    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() && currentTime - previousTime <= timeoutTime) {  // loop while the client's connected
      currentTime = millis();             
      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();
            
            // turns the GPIOs on and off
            if (header.indexOf("GET /5/on") >= 0) {
              Serial.println("GPIO 5 on");
              output5State = "on";
              digitalWrite(output5, HIGH);
            } else if (header.indexOf("GET /5/off") >= 0) {
              Serial.println("GPIO 5 off");
              output5State = "off";
              digitalWrite(output5, 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 LED buttons 
            client.println("<style>html { font-family: Times New Roman; display: inline-block; margin: 0px auto; text-align: center;}");
            client.println(".button {background-color: #2afac6; color: white; padding: 16px 40px; border-radius: 10px;");
            client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
            client.println(".button2 {background-color: #FF0000;}");

            // // CSS to style BMP280 measurement table 
            client.println("table {border-collapse: collapse; width:35%; margin-left:auto; margin-right:auto; }");
            client.println("th { padding: 12px; background-color: #3708d4; color: white; }");
            client.println("tr { border: 1px solid #ddd; padding: 12px; }");
            client.println("tr:hover { background-color: #bcbcbc; }");
            client.println("td { border: none; padding: 12px; }");
            client.println(".sensor { font-weight: medium; padding: 1px; }");

            client.println("</style></head>");
            
            // Web Page Heading
            client.println("<body><h1>PUNYA KOPENG</h1>");

            // Display current state, and ON/OFF buttons for GPIO 5  
            client.println("<div>");
            client.println("<p>LED " + output5State + "</p>");
            // If the output5State is off, it displays the ON button       
            if (output5State=="off") {
              client.println("<p><a href=\"/5/on\"><button class=\"button\">ON</button></a></p>");
            } else {
              client.println("<p><a href=\"/5/off\"><button class=\"button button2\">OFF</button></a></p>");
            } 
            client.println("</div>");

            // // Display From BMP280
            client.println("<div>");
            client.println("<table><tr><th>MEASUREMENT</th><th>VALUE</th></tr>");
            client.println("<tr><td>Temp. Celsius</td><td><span class=\"sensor\">");
            client.println(bmp.readTemperature());
            client.println(" *C</span></td></tr>");       
            client.println("<tr><td>Pressure</td><td><span class=\"sensor\">");
            client.println(bmp.readPressure() / 100.0F);
            client.println(" hPa</span></td></tr>");
            client.println("<tr><td>Approx. Altitude</td><td><span class=\"sensor\">");
            client.println(bmp.readAltitude(SEALEVELPRESSURE_HPA));
            client.println(" m</span></td></tr>"); 
            client.println("</div>");
               
            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("");
  }
}