• 5 min read • 30 - 40 min practice

ESP32 Project 8 - Web Server

Haloo semuanya, jumpa lagi, pada project kedelapan ini, kita akan melakukan eksperimen membuat web server menggunakan ESP32!!. Dimana nantinya web server akan menampilkan data sensor BMP180 yakni data suhu, tekanan, dan ketinggian. refernsi yang digunakan pada project ini bersumber dari https://randomnerdtutorials.com/esp32-web-server-with-bme280-mini-weather-station/

Web server adalah sebuah software (perangkat lunak) yang memberikan layanan berupa data melalui protokol HTTP atau HTTPS. Biasanya kan kalo di laptop membutuhkan aplikasi tambahan seperti xampp atau laragon untuk hosting layanan web server kita, nah pada esp32 ini terdpat modul Wi-Fi terintegrasi yang mampu terhubung ke router (Mode Station) atau membuat jaringan Wi-Fi sendiri (Access Point/SoftAP) ditambah terdapat dukungan library seperti WiFi.h dan WebServer.h untuk mempermudah pembuatan server, request HTTP service.

Selain itu, kita pada project delapan ini, kita akan bereksperimen dengan LED yang terhubung dengan webserver ESP32, lalu kita akan mematikan dan menyalakan lampu LED tersebut melalui browser.

Weather Station

Komponen

Komponen yang digunakan pada project ini adalah:

  1. Board ESP32
  2. Modul Sensor BMP180
  3. Breadboard
  4. Kabel Jumper

Rangkaian

Ini adalah rangkaian yang digunakan

Rangkaian
Gambar Rangkaian Sensor BMP180

Jadi pada gambar tersebut, terdapat 4 pin sensor BMP180 yaitu GND, SCL, SDA, dan 3v3. Dimana masing-masing pin tersebut terhubung ke:

  • GND terhubung ke GND
  • SCL terhubung ke GPIO22
  • SDA terhubung ke GPIO21
  • 3v3 terhubung ke 3v3

Ini adalah hasil rangkaian yang telah dilakukan:

Hasil rangkaian
Gambar Hasil Rangkaian Sensor BMP180

Buat tabel html

Kita perlu membuat tampilan data sensornya dalam bentuk html, dalam hal ini kita akan buat dalam bentuk tabel html.

Berikut adalah kode yang telah dibuat

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="data:,">
    <style>
        body {
            text-align: center;
            font-family: "Trebuchet MS", Arial;
        }

        table {
            border-collapse: collapse;
            width: 35%;
            margin-left: auto;
            margin-right: auto;
        }

        th {
            padding: 12px;
            background-color: #0043af;
            color: white;
        }

        tr {
            border: 1px solid #ddd;
            padding: 12px;
        }

        tr:hover {
            background-color: #bcbcbc;
        }

        td {
            border: none;
            padding: 12px;
        }

        .sensor {
            color: white;
            font-weight: bold;
            background-color: #bcbcbc;
            padding: 1px;
        }
    </style>
</head>

<body>
    <h1>ESP32 with BMP180</h1>
    <table>
        <tr>
            <th>MEASUREMENT</th>
            <th>VALUE</th>
        </tr>
        <tr>
            <td>Temp. Celsius</td>
            <td><span class='sensor'>XX *C</span></td>
        </tr>
        <tr>
            <td>Temp. Fahrenheit</td>
            <td><span class='sensor'>XX *F</span></td>
        </tr>
        <tr>
            <td>Pressure</td>
            <td><span class='sensor'>XX hPa</span></td>
        </tr>
        <tr>
            <td>Altitude</td>
            <td><span class='sensor'>XX m</span></td>
        </tr>
        <tr>
            <td>Pres. at sealevel</td>
            <td><span class='sensor'>XX hPa</span></td>
        </tr>
</body>
</html>

Nah berikut adalah hasilnya

Gambar table html
Gambar table html

Kode

Nah berikut adalah kode beserta penjelasan tiap baris kode yang digunakan, kode yang digunakan merupakan modifikasi dari referensi agar menyesuaikan dengan sensor BMP180.

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

// Load sensor library
#include <Adafruit_BMP085.h>

// create object sensor
Adafruit_BMP085 bmp; // I2C

// Set tekanan standar permukaan laut (dalam Pascal)
#define SEALEVELPRESSURE_HPA 101325

// Replace with your network credentials
const char* ssid     = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

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

// Variable to store the HTTP request
String header;

// 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);
  bool status;

  // Initialize sensor BMP  
  if (!bmp.begin()) {
    Serial.println("Could not find a valid BMP180 sensor, check wiring!");
    while (1);
  }

  // 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(){
  // Listening..
  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

    // Looping untuk client yang terhubung dan belum melampaui batas waktu
    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();
            
            // 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 table 
            client.println("<style>body { text-align: center; font-family: \"Trebuchet MS\", Arial;}");
            client.println("table { border-collapse: collapse; width:35%; margin-left:auto; margin-right:auto; }");
            client.println("th { padding: 12px; background-color: #0043af; 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 { color:white; font-weight: bold; background-color: #bcbcbc; padding: 1px; }");
            
            // Web Page Heading
            client.println("</style></head><body><h1>ESP32 with BMP180</h1>");
            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>Temp. Fahrenheit</td><td><span class=\"sensor\">");
            client.println(1.8 * bmp.readTemperature() + 32);
            client.println(" *F</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>Altitude</td><td><span class=\"sensor\">");
            client.println(bmp.readAltitude(SEALEVELPRESSURE_HPA));
            client.println(" m</span></td></tr>"); 
            client.println("<tr><td>Pres. at sealevel</td><td><span class=\"sensor\">");
            client.println(bmp.readSealevelPressure() / 100.0F);
            client.println(" hPa</span></td></tr>"); 
            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("");
  }
}

Sebelum diupload ubah kredensial SSID dan Password Wifi yang terhubung ya, kalo sudah selanjutnya kita lakukan uji coba

Gambar serial monitor
Gambar serial monitor

Uji coba

Berikut adalah langkah-langkah pengujian membuka web server dari ESP32

  1. Pastikan HP atau Laptop yang digunakan untuk melihat hasil webservernya terhubung ke jaringan WiFi yang sama dengan ESP32.
  2. Buka aplikasi browser di HP/Laptop
  3. Ketik alamat IP board ESP32
  4. Halaman web ESP32 with BMP180 telah tampil!

Berikut adalah hasil uji coba

Gambar hasil uji coba
Gambar hasil uji coba
Gambar serial monitor saat terhubung
Gambar serial monitor saat terhubung

LED

Nah bagian selanjutnya ini adalah kita akan bereksperimen menyalakan atau mematikan lampu LED melalui browser.

Komponen

Komponen yang digunakan pada project ini adalah:

  1. board esp32
  2. breadboard
  3. led 1 buah
  4. kabel jumper male-to-male 2 buah
  5. resistor 200 ohm

Rangkaian

Berikut adalah rancangan rangkaian yang digunakan:

Gambar rancangan rangkaian
Gambar rancangan rangkaian

Berikut adalah hasil rangkaiannya:

Gambar hasil rangkaian
Gambar hasil rangkaian

Buat tabel html

Kita perlu membuat tampilan kontrol lampu LEDnya dalam bentuk halaman web, dalam hal ini kita akan buat dalam bentuk tombol senderhana.

Berikut adalah kode html yang telah dibuat

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            font-family: Arial;
            text-align: center;
            margin-top: 50px;
        }

        .btn {
            padding: 15px 30px;
            font-size: 20px;
            text-decoration: none;
            border-radius: 5px;
            color: white;
            margin: 10px;
            display: inline-block;
        }

        .btn-on {
            background-color: #4CAF50;
        }

        .btn-off {
            background-color: #f44336;
        }
    </style>
</head>

<body>
    <h1>Kontrol LED ESP32</h1>
    <p>Status LED saat ini: <strong> 
    <span style="color: #4CAF50;">MENYALA</span> 
    <span style="color: #f44336;">MATI</span> 
    </strong></p> 
    <a href="/on" class="btn btn-on">Nyalakan LED</a>
    <a href="/off" class="btn btn-off">Matikan LED</a>
</body>

</html>

Nah berikut ini adalah tampilan web htmlnya

Gambar LED html
Gambar LED html

Kode

#include <WiFi.h>
#include <WebServer.h>

// Masukkan kredensial WiFi
const char* ssid = "NAMA_WIFI_KAMU";
const char* password = "PASSWORD_WIFI_KAMU";

// Inisialisasi web server pada port 80 (standar HTTP)
WebServer server(80);

// Mendefinisikan pin LED
const int ledPin = 5; 
bool ledState = false;

// Fungsi untuk menyusun dan mengirim halaman HTML
void handleRoot() {
  String html = "<!DOCTYPE html><html>";
  html += "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">";
  html += "<style>body { font-family: Arial; text-align: center; margin-top: 50px; } ";
  html += ".btn { padding: 15px 30px; font-size: 20px; text-decoration: none; border-radius: 5px; color: white; margin: 10px; display: inline-block; } ";
  html += ".btn-on { background-color: #4CAF50; } ";
  html += ".btn-off { background-color: #f44336; }</style></head>";
  html += "<body><h1>Kontrol LED ESP32</h1>";
  html += "<p>Status LED saat ini: <strong>" + String(ledState ? "<span style=\"color: #4CAF50;\">MENYALA</span>" : "<span style=\"color: #f44336;\">MATI</span>") + "</strong></p>";
  
  // Tombol untuk mengontrol LED
  html += "<a href=\"/on\" class=\"btn btn-on\">Nyalakan LED</a>";
  html += "<a href=\"/off\" class=\"btn btn-off\">Matikan LED</a>";
  html += "</body></html>";
  
  server.send(200, "text/html", html);
}

// Fungsi jika rute /on diakses
void handleOn() {
  digitalWrite(ledPin, HIGH);
  ledState = true;
  // Redirect kembali ke halaman utama
  server.sendHeader("Location", "/");
  server.send(303);
}

// Fungsi jika rute /off diakses
void handleOff() {
  digitalWrite(ledPin, LOW);
  ledState = false;
  // Redirect kembali ke halaman utama
  server.sendHeader("Location", "/");
  server.send(303);
}

// Rute jika halaman tidak ditemukan
void handleNotFound() {
  server.send(404, "text/plain", "Halaman tidak ditemukan");
}

void setup() {
  Serial.begin(115200);
  
  // Setup pin LED
  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, LOW); // Pastikan LED mati saat awal
  
  // Mulai koneksi WiFi
  Serial.print("Menghubungkan ke ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  
  Serial.println("");
  Serial.println("WiFi terhubung.");
  Serial.print("Alamat IP ESP32: ");
  Serial.println(WiFi.localIP());
  
  // Daftarkan rute URI ke fungsi yang sesuai
  server.on("/", handleRoot);
  server.on("/on", handleOn);
  server.on("/off", handleOff);
  server.onNotFound(handleNotFound);
  
  // Jalankan server
  server.begin();
  Serial.println("HTTP server telah dimulai");
}

void loop() {
  // Menangani permintaan dari client yang masuk
  server.handleClient();
}

Sebelum diupload ubah kredensial SSID dan Password Wifi yang terhubung ya, kalo sudah selanjutnya kita lakukan uji coba

Gambar serial monitor
Gambar serial monitor

Uji Coba

Berikut adalah langkah-langkah pengujian mengontrol LED melalui web server dari ESP32

  1. Pastikan HP atau Laptop yang digunakan untuk melihat hasil webservernya terhubung ke jaringan WiFi yang sama dengan ESP32.
  2. Buka aplikasi browser di HP/Laptop
  3. Ketik alamat IP board ESP32
  4. Halaman web ESP32 dengan tampilan kontrol LED terlihat di browser
  5. Uji coba mematikan/menyalakan lampu LED tersebut

Berikut adalah hasil uji coba

Video uji coba menyalakan lampu LED melalui browser

Alhamdulillah eksperimen berhasil menyalakan lampu led melalui laptop yang terhubung ke jaringan yang sama dengan ESP, dicoba juga menggunakan HP bisa mematikan dan menyalakan lampu LED tersebut dengan lancar. Namun muncul kendala, ketika ESP ini mati atau baru terhubung ke Jaringan WIFI, IP Address dari board ESP32 ikut berubah mau ga mau kita harus ngecek melalui Arduiono IDE, atau solusinya kita hibungkan ke OLED untuk menampilkan ip address setiap terhubung ke jaringan WiFinya.

Oke sampai sini dulu aja ya laporannya, terimakasih sudah mampir kesini!

Bagaimana tanggapan Anda tentang tulisan ini?

Kembali ke daftar tulisan