IOT ARCHITECTURE & PROTOCOLS(202046714)

G H PATEL COLLEGE OF ENGINEERING AND TECHNOLOGY

Practical – 3
Aim: To create a standalone web server that controls outputs (two LEDs).

Apparatus: NodeMCU, Arduino Software

Theory:
Web server is a place which stores, processes and delivers web pages to Web
clients. Web client is

nothing but a web browser on our laptops and smartphones. The communication
between client and

server takes place using a special protocol called Hypertext Transfer Protocol
(HTTP)

HTTP Web Server Client Illustration

In this protocol, a client initiates communication by making a request for a specific web page
using HTTP and the server responds with the content of that web page or an error message if
unable to do so (like famous 404 Error). Pages delivered by a server are mostly HTML
documents.

Name: Pujankumar patel En.No.: 12302110503005

 IOT ARCHITECTURE & PROTOCOLS(202046714)

G H PATEL COLLEGE OF ENGINEERING AND TECHNOLOGY

Procedure:

How to create a web server to control two outputs using Arduino IDE.
When a URL is typed in a web browser and hit ENTER, then the browser sends a HTTP

request (a.k.a. GET request) to a web server. It’s a job of web server to handle this request by

doing something.

we are going to control things by accessing a specific URL. For example, suppose we

entered a URL like http://192.168.1.1/ledon in a browser. The browser then sends a HTTP

request to ESP8266 to handle this request. When ESP8266 reads this request, it knows that

user wants to turn the LED ON. So, it turns the LED ON and sends a dynamic webpage to a

browser showing LED status : ON

Name: Pujankumar patel En.No.: 12302110503005

 IOT ARCHITECTURE & PROTOCOLS(202046714)

G H PATEL COLLEGE OF ENGINEERING AND TECHNOLOGY

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

// Replace with your network credentials

const char* ssid = "OnePlus 12R";
const char* password = "123456789";

// Set web server port number to 80

WiFiServer server(80);

// Variable to store the HTTP request

String header;

// Auxiliary variables to store the current output state

String output5State = "off";
String output4State = "off";

// Assign output variables to GPIO pins

const int output5 = 5; // GPIO 5
const int output4 = 4; // GPIO 4

// Current time
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0;
// Define timeout time in milliseconds
const long timeoutTime = 2000;

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

// Initialize the output variables as outputs

pinMode(output5, OUTPUT);
pinMode(output4, OUTPUT);

// Set outputs to LOW

digitalWrite(output5, LOW);
digitalWrite(output4, LOW);

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

Name: Pujankumar patel En.No.: 12302110503005

 IOT ARCHITECTURE & PROTOCOLS(202046714)

G H PATEL COLLEGE OF ENGINEERING AND TECHNOLOGY

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

Serial.println("New Client."); // Print a message out in the serial port
String currentLine = ""; // Make a String to hold incoming data from
the client
currentTime = millis();
previousTime = currentTime;

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, two newline characters in a row
indicate the end of the client HTTP request
if (currentLine.length() == 0) {
// Send an HTTP response
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");

Name: Pujankumar patel En.No.: 12302110503005

 IOT ARCHITECTURE & PROTOCOLS(202046714)

G H PATEL COLLEGE OF ENGINEERING AND TECHNOLOGY

client.println("Connection: close");
client.println();

// Turn 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);
} else if (header.indexOf("GET /4/on") >= 0) {
Serial.println("GPIO 4 on");
output4State = "on";
digitalWrite(output4, HIGH);
} else if (header.indexOf("GET /4/off") >= 0) {
Serial.println("GPIO 4 off");
output4State = "off";
digitalWrite(output4, 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:,\">");
client.println("<style>html { font-family: Helvetica; display:
inline-block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #195B6A; border: none;
color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px;
cursor: pointer;}");
client.println(".button2 {background-color:
#77878A;}</style></head>");
client.println("<body><h1>ESP32 Web Server</h1>");

// Display current state, and ON/OFF buttons for GPIO 5

client.println("<p>GPIO 5 - State " + output5State + "</p>");
if (output5State == "off") {
client.println("<p><a href=\"/5/on\"><button
class=\"button\">ON</button></a></p>");

Name: Pujankumar patel En.No.: 12302110503005

 IOT ARCHITECTURE & PROTOCOLS(202046714)

G H PATEL COLLEGE OF ENGINEERING AND TECHNOLOGY

} else {
client.println("<p><a href=\"/5/off\"><button class=\"button
button2\">OFF</button></a></p>");
}

// Display current state, and ON/OFF buttons for GPIO 4

client.println("<p>GPIO 4 - State " + output4State + "</p>");
if (output4State == "off") {
client.println("<p><a href=\"/4/on\"><button
class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/4/off\"><button class=\"button
button2\">OFF</button></a></p>");
}

client.println("</body></html>");

// The HTTP response ends with another blank line

client.println();
break;
} else { // If you got a newline, 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 currentLine
}
}
}
// Clear the header variable
header = "";
// Close the connection
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}

Name: Pujankumar patel En.No.: 12302110503005

 IOT ARCHITECTURE & PROTOCOLS(202046714)

G H PATEL COLLEGE OF ENGINEERING AND TECHNOLOGY

Testing the Web Server

 upload the code,
 Open the Serial Monitor at a baud rate of 115200.
 Findi the NodeMCU IP Address using the Serial Monitor

 Copy that IP address, because you need it to access the web server.

 Accessing the Web Server. Open the browser and type the Node MCU IP address, and the
following page will be displayed as shown in below figure. This page is sent by the NodeMCU
when a request on the NodeMCU IP address is made.

Name: Pujankumar patel En.No.: 12302110503005

 IOT ARCHITECTURE & PROTOCOLS
PROTOCOLS(202046714)

G H PATEL COLLEGE OF ENGINEERING AND TECHNOLOGY

 Other information about the HTTP request such as HTTP header fields can be
also seen. They define the operating parameters of an HTTP transaction.

Name: Pujankumar patel En.No.: 12302110503005

 IOT ARCHITECTURE & PROTOCOLS(202046714)

G H PATEL COLLEGE OF ENGINEERING AND TECHNOLOGY

Name: Pujankumar patel En.No.: 12302110503005

 IOT ARCHITECTURE & PROTOCOLS(202046714)

G H PATEL COLLEGE OF ENGINEERING AND TECHNOLOGY

Output:

Conclusion:

The standalone web server was successfully created using NodeMCU, enabling the
control of two LEDs via a web interface. This project demonstrates the integration
of IoT technology with web development, providing a user-friendly platform to
manage hardware outputs remotely. It highlights the potential for scalable solutions
in smart home automation and similar applications, ensuring reliable and efficient
operation with minimal hardware requirements.

Name: Pujankumar patel En.No.: 12302110503005