ESP32 WEB SERVER KONTROL

LAPORAN PRAKTIKUM
Komputasi Pervasif / Pervasive Computing

SEMESTER V
PRAKTIK
ESP32 Web Server
Nama Praktikan Kelompok 6 :

ARIEL MUHAMMAD AMRI (2003421002)
FARHAN YUSWA BIYANTO (2003421031)
SALSYA NUR ALFIENDA (2003421028)
BM5A
PROGRAM STUDI
BROADBAND MULTIMEDIA
JURUSAN TEKNIK ELEKTRO
POLITEKNIK NEGERI JAKARTA
2022
Langkah-langkah praktikum :
1. Unit 1: Web Server Introduction
Di bagian ini kita akan melihat ESP32 sebagai web server. Kita akan membuat
web server untuk mengontrol output dari jarak jauh melalui web, dan menunjukkan
cara menampilkan pembacaan sensor di halaman web. Setelah membuat web server,
kita dapat menambahkan lebih banyak output dan pembacaan sensor sesuai
kebutuhan kita. Selain itu kita juga dapat menyesuaikan tampilan halaman web kita.
Kemudian, kita akan melindungi web server kita dengan kata sandi dan kita dapat
belajar bagaimana cara membuat web server kita dapat diakses oleh siapa saja. Di unit
ini kita akan mempelajari ap aitu web server ESP32.
Client-server Ketika kita mengetik URL di browser, yang terjadi adalah kita
mengirim permintaan melalui Hypertect Transfer Pprotocol (HTTP) ke server. Ketika
server menerima permintaan, mengirimkan tanggapan juga melalui HTTP, dan kita
dapat melihatnya di web browser. Client dan server berkomunikasi melalui k omputer
jaringan.
Server host untuk menjalankan satu atau lebih program server untuk berbagi
sumber daya mereka dengan clients. Web server sebagai perangkat lunak yang
mendengarkan HTTP yang masuk permintaan dan mengirimkan tanggapan Ketika
diminta. ESP akan bertindak sebagai host server mendengarkan permintaan HTP dari
klien.
2. Unit 2: Web Server Control Output
Source code :
Berikut hasil yang ditampilkan pada serial monitor :
Hasil yang ditampilkan pada webserver :

Percobaan :
Ketika GPI27 state ON
GPI26 state ON
Ketika GPI 26 & 27 state ON
Ketika GPI 26 & 27 state OFF

3. Unit 3: ESP32 Web Server – HTML and CSS Basics (Part 1/2)
Source code :
<!DOCTYPE html>
<html>
<head>
<title>ESP32 Web Server</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<style>
html {
font-family: Helvetica;
display: inline-block;
margin: 0px auto;
text-align: center;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 40px;
text-decoration: none;
font-size: 30px;
margin: 2px;
cursor: pointer;
}
.button2 {
background-color: #555555;
}
</style>
</head>
<body>
<h1>ESP32 Web Server</h1>
<p>GPIO 26 - State</p>
<p><a href="/26/on"><button class="button">ON</button></a></p>
<p><a href="/26/off"><button class="button button2">OFF</button></a></p>
<p>GPIO 27 - State</p>
<p><a href="/27/on"><button class="button">ON</button></a></p>
<p><a href="/27/off"><button class="button button2">OFF</button></a></p>
</body>
</html>
4. Unit 4: ESP32 Web Server – HTML in Arduino IDE (Part 2/2)
Source code :
#include <WiFi.h>
const char* WIFI_NAME= "ans";
const char* WIFI_PASSWORD = "29032002";
WiFiServer server(80);
String header;
String LED_ONE_STATE = "off";
String LED_TWO_STATE = "off";

const int GPIO_PIN_NUMBER_26 = 26;
const int GPIO_PIN_NUMBER_27 = 27;
void setup() {
Serial.begin(115200);
pinMode(GPIO_PIN_NUMBER_26, OUTPUT);
pinMode(GPIO_PIN_NUMBER_27, OUTPUT);
digitalWrite(GPIO_PIN_NUMBER_26, LOW);
Serial.print("Connecting to ");
Serial.println(WIFI_NAME);
WiFi.begin(WIFI_NAME, WIFI_PASSWORD);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.print("Trying to connect to Wifi Network");
Serial.println("");
Serial.println("Successfully connected to WiFi network");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
void loop(){
WiFiClient client = server.available();
if (client) {
Serial.println("New Client is requesting web page");
String current_data_line = "";
while (client.connected()) {
if (client.available()) {
char new_byte = client.read();
Serial.write(new_byte);
header += new_byte;
if (new_byte == '\n') {
if (current_data_line.length() == 0)
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
if (header.indexOf("LED0=ON") != -1)
Serial.println("GPIO26 LED is ON");
LED_ONE_STATE = "on";
digitalWrite(GPIO_PIN_NUMBER_26, HIGH);
if (header.indexOf("LED0=OFF") != -1)
Serial.println("GPIO26 LED is OFF");
LED_ONE_STATE = "off";
if (header.indexOf("LED1=ON") != -1)
Serial.println("GPIO27 LED is ON");
LED_TWO_STATE = "on";
digitalWrite(GPIO_PIN_NUMBER_27, HIGH);
if (header.indexOf("LED1=OFF") != -1)
Serial.println("GPIO27 LED is OFF");
LED_TWO_STATE = "off";
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:,\">");
client.println("<style>html { font-family: Helvetica; display: inline-block; margin:

0px auto; text-align: center;}");
client.println(".button { background-color: #4CAF50; border: 2px solid
#4CAF50;; color: white; padding: 15px 32px; text-align: center; text-decoration: none;
display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; }");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor:

pointer;}");
// Web Page Heading
client.println("</style></head>");
client.println("<body><center><h1>ESP32 Web server LED controlling

example</h1></center>");
client.println("<center><h2>Press on button to turn on led and off button to

turn off LED</h3></center>");
client.println("<form><center>");
client.println("<p> LED one is " + LED_ONE_STATE + "</p>");
// If the PIN_NUMBER_22State is off, it displays the ON button
client.println("<center> <button class=\"button\" name=\"LED0\" value=\"ON\"

type=\"submit\">LED0 ON</button>") ;
client.println("<button class=\"button\" name=\"LED0\" value=\"OFF\"

type=\"submit\">LED0 OFF</button><br><br>");
client.println("<p>LED two is " + LED_TWO_STATE + "</p>");
client.println("");
client.println("<button class=\<button class=\"button\" name=\"LED1\"

value=\"ON\" type=\"submit\">LED1 ON</button>"button\" name=\"LED1\"
value=\"OFF\" type=\"submit\">LED1 OFF</button> <br><br>");
client.println("</center></form></body></html>");
client.println();
break;
}
else
current_data_line = "";
else if (new_byte != '\r')
current_data_line += new_byte;
// Clear the header variable
header = "";
// Close the connection
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
Ketika GPIO 26 state ON & OFF
Ketika GPIO 27 state ON & OFF
5. Unit 6: Making Your ESP32 Web Server Password Protected
Source code :
// Load Wi-Fi library
#include <WiFi.h>
// Replace with your network credentials
const char* ssid = "ans";
const char* password = "29032002";
// Set web server port number to 80
// Variable to store the HTTP request
String header;
// Auxiliar variables to store the current output state
String output26State = "off";

// Assign output variables to GPIO pins
const int output26 = 26;
// 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() {
// Initialize the output variables as outputs
pinMode(output26, OUTPUT);
// Set outputs to LOW

digitalWrite(output26, LOW);
// Connect to Wi-Fi network with SSID and password
Serial.println(ssid);
WiFi.begin(ssid, password);
delay(500);
Serial.print(".");
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
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
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) {
// checking if header is valid
// dXNlcjpwYXNz = 'user:pass' (user:pass) base64 encode
// Finding the right credential string, then loads web page
if(header.indexOf("dXNlcjpwYXNz") >= 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();
// 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";
} else if (header.indexOf("GET /27/on") >= 0) {
// Display the HTML web page
client.println("<head><meta name=\"viewport\" content=\"width=device-

width, initial-scale=1\">");
// 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;");

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>");
} else {

client.println("</body></html>");
// The HTTP response ends with another blank line
client.println();
// Break out of the while loop
break;
// Wrong user or password, so HTTP request fails...
else {
client.println("HTTP/1.1 401 Unauthorized");
client.println("WWW-Authenticate: Basic realm=\"Secure\"");
client.println("Content-Type: text/html");
client.println();
client.println("<html>Authentication failed</html>");
} 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

}
header = "";
client.stop();
Serial.println("");
Hasil yang diperoleh :

Memasukkan Username dan Password
Lalu klik sign in dan memunculkan tampilan sama seperti unit2
Hasil yang ditampilkan pada webserver :

Percobaan :
GPI26 state ON

6. Unit 7: Accessing the ESP32 Web Server from Anywhere
Source Code:
// Load Wi-Fi library
#include <WiFi.h>
// Replace with your network credentials
const char* ssid = "an";
const char* password = "29032002";
// Set web server port number to 8888
// Variable to store the HTTP request
String header;
// Auxiliar variables to store the current output state

// Assign output variables to GPIO pins
// 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() {
// Initialize the output variables as outputs
// Set outputs to LOW

// Connect to Wi-Fi network with SSID and password
Serial.println(ssid);
WiFi.begin(ssid, password);
delay(500);
Serial.print(".");
// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
server.begin();
}
void loop(){
WiFiClient client = server.available(); // Listen for incoming clients
if (client) { // If a new client connects,
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
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) {
// checking if header is valid
// dXNlcjpwYXNz = 'user:pass' (user:pass) base64 encode
// Finding the right credential string, then loads web page
if(header.indexOf("dXNlcjpwYXNz") >= 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();
// turns the GPIOs on and off
if (header.indexOf("GET /26/on") >= 0) {
} else if (header.indexOf("GET /27/on") >= 0) {
// Display the HTML web page
client.println("<head><meta name=\"viewport\" content=\"width=device-

width, initial-scale=1\">");
// 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;");

pointer;}");
client.println(".button2 {background-color: #555555;}</style></head>");
// Web Page Heading
client.println("<body><h1>ESP32 Web Server</h1>");
} else {

} else {

client.println("</body></html>");
// The HTTP response ends with another blank line
client.println();
// Break out of the while loop
break;
// Wrong user or password, so HTTP request fails...
else {
client.println("HTTP/1.1 401 Unauthorized");
client.println("WWW-Authenticate: Basic realm=\"Secure\"");
client.println("Content-Type: text/html");
client.println();
client.println("<html>Authentication failed</html>");
} 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

}
header = "";
client.stop();
Serial.println("");
Tambahkan :8888 dibelakang ip address wifi yang disambungkan
http://192.168.43.109:8888/
Lalu masuk ke website https://ngrok.com/ , sign up dan download software ngrok
Setelah itu masukkan perintah ini ke terminal ngrok
Kemudian authtoken terdapat di website ngrok yang sudah kita loginkan

Ketika semua sudah diketikkan seperti perintah diatas klik enter dan muncul link
hosting
Masukkan link hosting ke browser tcp://0.tcp.ap.ngrok.io:10987 ketika copy dibrowser memakai

http://
Tampilan setelah dicopy ke browser dan login dengan username user dan password pass
Setelah login sama seperti Langkah di unit 2

Percobaan :
GPI26 state ON

ESP32 WEB SERVER KONTROL

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

ESP32 WEB SERVER KONTROL

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN PRAKTIKUM

Komputasi Pervasif / Pervasive Computing

ESP32 Web Server

Nama Praktikan Kelompok 6 :

1. Unit 1: Web Server Introduction

Hasil yang ditampilkan pada webserver :

Ketika GPI27 state ON

Ketika GPI 26 & 27 state OFF

const char* WIFI_NAME= "ans";

const char* WIFI_PASSWORD = "29032002";

String LED_ONE_STATE = "off";

String LED_TWO_STATE = "off";

const int GPIO_PIN_NUMBER_27 = 27;

while (WiFi.status() != WL_CONNECTED) {

Serial.print("Trying to connect to Wifi Network");

Serial.println("Successfully connected to WiFi network");

Serial.println("IP address: ");

WiFiClient client = server.available();

Serial.println("New Client is requesting web page");

String current_data_line = "";

char new_byte = client.read();

client.println("HTTP/1.1 200 OK");

Serial.println("GPIO26 LED is ON");

Serial.println("GPIO26 LED is OFF");

Serial.println("GPIO27 LED is ON");

Serial.println("GPIO27 LED is OFF");

client.println("<head><meta name=\"viewport\" content=\"width=device-width,

client.println("<link rel=\"icon\" href=\"data:,\">");

client.println("<style>html { font-family: Helvetica; display: inline-block; margin:

client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor:

// Web Page Heading

client.println("<body><center><h1>ESP32 Web server LED controlling

client.println("<center><h2>Press on button to turn on led and off button to

client.println("<p> LED one is " + LED_ONE_STATE + "</p>");

// If the PIN_NUMBER_22State is off, it displays the ON button

client.println("<center> <button class=\"button\" name=\"LED0\" value=\"ON\"

client.println("<button class=\"button\" name=\"LED0\" value=\"OFF\"

client.println("<p>LED two is " + LED_TWO_STATE + "</p>");

client.println("<button class=\<button class=\"button\" name=\"LED1\"

else if (new_byte != '\r')

// Clear the header variable

// Close the connection

// Load Wi-Fi library

// Replace with your network credentials

const char* ssid = "ans";

const char* password = "29032002";

// Set web server port number to 80

// Variable to store the HTTP request

// Auxiliar variables to store the current output state

String output26State = "off";

String output27State = "off";

const int output26 = 26;

const int output27 = 27;

unsigned long currentTime = millis();

unsigned long previousTime = 0;

// Define timeout time in milliseconds (example: 2000ms = 2s)

const long timeoutTime = 2000;

// Initialize the output variables as outputs

// Set outputs to LOW

// Connect to Wi-Fi network with SSID and password

while (WiFi.status() != WL_CONNECTED) {

// Print local IP address and start web server

Serial.println("IP address: ");