Project 8: ESP32 Web Server

  1. ESP32 Devkit V1
  2. BMP280 Sensor
  3. Jumper wire
  4. LED
  5. Resistors 330 Ohm
  1. 3V3 to VCC on BMP280
  2. GND to GND on BMP280
  3. GPIO22 to SCK on BMP280
  4. GPIO21 to SDA on BMP280
  5. GPIO5 to Blue LED (with Resistor)
//include library
#include <WiFi.h>
#include <Wire.h>
#include <Adafruit_BMP280.h>
#include <Adafruit_Sensor.h>
#define SEALEVELPRESSURE_HPA (1013.25)
Adafruit_BMP280 bmp; // I2C
//Adafruit_BME280 bme(BME_CS); // hardware SPI
//Adafruit_BME280 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK); // software SPI
// Replace with your network credentials
const char* ssid = "SSID_NAME";
const char* password = "THE_PASSWORD";
// Set web server port number to 80
WiFiServer server(80);
// Variable to store the HTTP request
String header;
// Variabel untuk menyimpan kondisi output sekarangString output5State = "off";// Variabel untuk menyimpan pin GPIO yang digunakanconst int output5 = 5; //GPIO5// 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() {
bool status;
// Inisialisasi variabel output menjadi OUTPUT
pinMode(output5, OUTPUT);
// Mengatur output menjadi LOW (LED mati)
digitalWrite(output5, LOW);

// default settings
// (you can also pass in a Wire library object like &Wire2)
//status = bme.begin();
if (!bmp.begin(0x76)) {
Serial.println("Could not find a valid BME280 sensor, check wiring!");
while (1);
// Connect to Wi-Fi network with SSID and password
Serial.print("Connecting to ");
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
// Print local IP address and start web server
Serial.println("WiFi connected.");
Serial.println("IP address: ");
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
// Membuat variabel untuk menyimpan data yang masuk dari klien
String currentLine = ""; // make a String to hold incoming data from the client
// loop selama ada klien yang terhubung
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 =; // 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("Connection: close");
// Menyala-matikan LED melalui pin GPIO
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 for weather station
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 untuk menghias table sensor
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:black; font-weight: bold; background-color: #DF711B; padding: 1px; }");
client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
// CSS untuk menghias table LED ON-OFF
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;}");
// Web Page Heading
client.println("</style></head><body><h1>ESP32 with BMP280 Sensor and LED</h1>");
client.println("<tr><td>Temp. Celsius</td><td><span class=\"sensor\">");
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>Approx. Altitude</td><td><span class=\"sensor\">");
client.println(" m</span></td></tr>");
// Menampilkan kondisi LED untuk GPIO 5client.println("<p>GPIO 5 - State " + output5State + "</p>");// Jika output5State sedang off, ditampilkan tombol ONif (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>");}

// Respon HTTP diakhiri dengan baris kosong
// keluar dari loop
} 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
Serial.println("Client disconnected.");




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The mystery of the growing DSpace database

Overview of Amazon Web Service

Forms using Tag Helpers in ASP.NET Core MVC | Class 8

Google I/O Filter Animation in Flutter

A Quick Comparision Between Imperative and Functional Programming (Part 1)

Trade-offs in distributed system (part 2)

Why Now is the Time to Work with the DoD

Fl Keygen.reg

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alvito Rizqi

Alvito Rizqi

More from Medium

ESP32 Web Server with BMP280

How To Make An Automatic Trash Bin Using Cardboard

How to deploy your static website via firebase ?

JSON Web Token (JWT)