ESP32: Web Server

halo setelah kita berhasil menghubungkan modul bluetooth pada artikel sebelumnya, sekarang kita coba memanfaatkan webserver. kita coba…

Ebe · 2026-05-14 02:35 · 0 claps · 2.4 min read

#esp32 #web-server #bmp280

Open on Medium ↗

ESP32: Web Server

halo setelah kita berhasil menghubungkan modul bluetooth pada artikel sebelumnya, sekarang kita coba memanfaatkan webserver. kita coba menggunakan langkah sebelumnya pemanfaatan module bmp280, diartikel ini

[embed]ESP32: sensor BMP280 ESP32: sensor BMP280 halooo kemarin kita sudah berhasil membuat touch sensor dengan sensor internal yang ada pada…toniebe48.medium.com

ikuti langkah-langkah nya, jika sudah sesuai hingga tahap akhir, selanjutnya kita coba modified bagian code untuk menampilkan webserver

code nya adalah sebagai berikut:

#include <WiFi.h>
#include <Wire.h>
#include <Adafruit_BMP280.h>

const char* ssid = "ebe";
const char* password = "guepunya";

Adafruit_BMP280 bmp;

WiFiServer server(80);

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

  Wire.begin(21, 22);

  if (!bmp.begin(0x76)) {
    Serial.println("BMP280 tidak ditemukan");
    while (1)
      ;
  }

  WiFi.begin(ssid, password);
  Serial.print("Connecting");

  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.println("Connected!");
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());

  server.begin();
}

void loop() {

  WiFiClient client = server.available();

  if (client) {

    float temp = bmp.readTemperature();
    float pressure = bmp.readPressure() / 100;
    float altitude = bmp.readAltitude(1008);

    String html = "<!DOCTYPE html><html>";

    html += "<head>";
    html += "<meta name='viewport' content='width=device-width, initial-scale=1'>";
    html += "<title>ESP32 Weather Station</title>";

    html += "<style>";
    html += "body{font-family:Arial;background:#0f172a;color:white;text-align:center;margin:0;padding:20px;}";
    html += "h1{margin-bottom:30px;}";
    html += ".container{display:flex;flex-direction:column;gap:20px;align-items:center;}";
    html += ".card{background:#1e293b;padding:20px;border-radius:12px;width:220px;";
    html += "box-shadow:0 4px 10px rgba(0,0,0,0.3);}";
    html += ".value{font-size:28px;font-weight:bold;margin-top:10px;}";
    html += ".label{font-size:16px;color:#94a3b8;}";
    html += "button{margin-top:30px;padding:10px 20px;border:none;border-radius:8px;";
    html += "background:#38bdf8;color:black;font-size:16px;}";
    html += "</style>";

    html += "</head>";

    html += "<body>";

    html += "<h1>Ebe ESP32 Weather Station</h1>";

    html += "<div class='container'>";

    html += "<div class='card'>";
    html += "<div class='label'>Temperature</div>";
    html += "<div class='value'>" + String(temp) + " °C</div>";
    html += "</div>";

    html += "<div class='card'>";
    html += "<div class='label'>Pressure</div>";
    html += "<div class='value'>" + String(pressure) + " hPa</div>";
    html += "</div>";

    html += "<div class='card'>";
    html += "<div class='label'>Altitude</div>";
    html += "<div class='value'>" + String(altitude) + " m</div>";
    html += "</div>";

    html += "</div>";

    html += "<button onclick='location.reload()'>Refresh</button>";

    html += "</body></html>";

    client.println("HTTP/1.1 200 OK");
    client.println("Content-type:text/html");
    client.println("Connection: close");
    client.println();
    client.println(html);
    client.println();

    delay(1);
    client.stop();
  }
}

kira mendefinisikan wifi #include <WiFi.h>

kemudian mensetup wifi dirumah kita dengan

const char* ssid = “NAMA_WIFI”;
const char* password = “PASSWORD_WIFI”;

setelah itu kita membuat webserver

WiFiServer server(80);

langkah selanjutnya adalah memuat wifi rumah

WiFi.begin(ssid, password);

kemudian jangan lupa di print agar dapat ip untuk mengakses webserve

Serial.println(WiFi.localIP());

sisanya fungsi sama untuk membaca bmp280

float temp = bmp.readTemperature();
float pressure = bmp.readPressure() / 100;
float altitude = bmp.readAltitude(1008);

dan bagian untuk mempercantik web adalah html dan styling css sederhana

String html = "<!DOCTYPE html><html>";

    html += "<head>";
    html += "<meta name='viewport' content='width=device-width, initial-scale=1'>";
    html += "<title>ESP32 Weather Station</title>";

    html += "<style>";
    html += "body{font-family:Arial;background:#0f172a;color:white;text-align:center;margin:0;padding:20px;}";
    html += "h1{margin-bottom:30px;}";
    html += ".container{display:flex;flex-direction:column;gap:20px;align-items:center;}";
    html += ".card{background:#1e293b;padding:20px;border-radius:12px;width:220px;";
    html += "box-shadow:0 4px 10px rgba(0,0,0,0.3);}";
    html += ".value{font-size:28px;font-weight:bold;margin-top:10px;}";
    html += ".label{font-size:16px;color:#94a3b8;}";
    html += "button{margin-top:30px;padding:10px 20px;border:none;border-radius:8px;";
    html += "background:#38bdf8;color:black;font-size:16px;}";
    html += "</style>";

    html += "</head>";

    html += "<body>";

    html += "<h1>Ebe ESP32 Weather Station</h1>";

    html += "<div class='container'>";

    html += "<div class='card'>";
    html += "<div class='label'>Temperature</div>";
    html += "<div class='value'>" + String(temp) + " °C</div>";
    html += "</div>";

    html += "<div class='card'>";
    html += "<div class='label'>Pressure</div>";
    html += "<div class='value'>" + String(pressure) + " hPa</div>";
    html += "</div>";

    html += "<div class='card'>";
    html += "<div class='label'>Altitude</div>";
    html += "<div class='value'>" + String(altitude) + " m</div>";
    html += "</div>";

    html += "</div>";

    html += "<button onclick='location.reload()'>Refresh</button>";

    html += "</body></html>";

    client.println("HTTP/1.1 200 OK");
    client.println("Content-type:text/html");
    client.println("Connection: close");
    client.println();
    client.println(html);

setelah di upload kita akses webserver kita..

maka hasilnya akan seperti ini

메타데이터

post_id: cea030ac4a08
slug: esp32-web-server-cea030ac4a08
url: https://medium.com/@toniebe48/esp32-web-server-cea030ac4a08
canonical_url: https://medium.com/@toniebe48/esp32-web-server-cea030ac4a08
author_url: https://medium.com/@toniebe48
status: ok
fetched_at: 2026-07-10 15:46:15

ESP32: Web Server

More from Ebe

ESP32: Water Volume Checking

ESP32: OLED and BMP280

ESP32: sensor BMP280