5/19/23, 1:41 AM ESP8266 Based Webserver to Control LED from Webpage

About Us (https://iotdesignpro.com/about-us) Contact (https://iotdesignpro.com/contact)

(/)
 (https://www.facebook.com/IoT-Design-Pro-284393472235331/)  

(https://twitter.com/IoTDesignPro1)  (https://www.pinterest.com/iotdesignpro)

18
ESP8266
Shares HOME AUTOMATION 11 Feb, 2019 / 7 Comments

ESP8266 Based Webserver to Control LED from Webpage

ESP series WiFi module becomes very popular among hobbyists and industries for IoT based
projects.  ESP8266 Wi-Fi transceiver  is one of the most used module for IoT based Applications
(https://iotdesignpro.com/taxonomy/term/14). Here, we are using ESP8266 NodeMCU to connect with
ThingSpeak IoT cloud Platform (https://iotdesignpro.com/taxonomy/term/7). A NodeMCU have
inbuilt Wi-Fi shield so we don’t need to connect an external Wi-Fi shield like we used to do with Arduino.
Previously, we have used ESP32 webserver for controlling LED using webpage
(https://iotdesignpro.com/projects/control-led-using-esp32-based-webserver).

https://iotdesignpro.com/projects/esp8266-based-webserver-to-control-led-from-webpage 1/22
5/19/23, 1:41 AM ESP8266 Based Webserver to Control LED from Webpage

(/)


In this project, we are making an IoT based LED control from webpage using ESP8266. Even by doing
some small modifications in this same project, we can use this for home automation
(https://iotdesignpro.com/taxonomy/term/17). For controlling the LED using Webserver
(https://iotdesignpro.com/taxonomy/term/20) we need to create an HTML webpage. The page will
18
Shares
have two buttons for turning LED ON and OFF.

Components Required
ESP8266 NodeMCU
LED
250 ohm Resistor
Breadboard
Jumper Wires

https://iotdesignpro.com/projects/esp8266-based-webserver-to-control-led-from-webpage 2/22
5/19/23, 1:41 AM ESP8266 Based Webserver to Control LED from Webpage

Circuit diagram
(/)


18
Shares

Connect positive pin of LED to D4 pin of NodeMCU.

Ground the negative pin of the LED with a resistor.

Program Explanation
Complete code is given at the end of this project. In this section, I will tell you how the code actually
works.
The first thing you need to do is include the ESP8266 WiFi library.

#include <ESP8266WiFi.h>

https://iotdesignpro.com/projects/esp8266-based-webserver-to-control-led-from-webpage 3/22
5/19/23, 1:41 AM ESP8266 Based Webserver to Control LED from Webpage

Now enter your network credentials

(/) i.e. SSID and password of your WiFi Network inside the double

inverted comma:

const char* ssid = "Wi-Fi Name";

const char* password = "Password";

Here, in the below code we are initializing the Led pin:

18
Shares
int LED = 2;

In void setup() function, we will initialize the baud rate, LED output, and will connect the module with
the Wi-Fi using WiFi.begin(ssid,password); function. This function begins the Wi-Fi connection, wait for
a successful connection and print the ESP IP address in the serial monitor.

void setup()
{
Serial.begin(115200); //Default Baudrate
pinMode(LED, OUTPUT);
digitalWrite(LED, LOW);

Serial.print("Connecting to the Newtork");

WiFi.begin(ssid, password);

If we connected with the Wi-FI successfully, the serial monitor will display “Wi-Fi Connected” and “web
server starts”, otherwise it will display “dots” on Serial Monitor.

while (WiFi.status() != WL_CONNECTED)

{
delay(500);
Serial.print(".");
}

Serial.println("WiFi connected");
server.begin(); // Starts the Server
Serial.println("Server started");

It will print the IP address of Esp8266 and webpage URL:

https://iotdesignpro.com/projects/esp8266-based-webserver-to-control-led-from-webpage 4/22
5/19/23, 1:41 AM ESP8266 Based Webserver to Control LED from Webpage

Serial.print("IP Address of network: ");

(/)
Serial.println(WiFi.localIP());

Serial.print("Copy and paste the following URL: https://");
Serial.print(WiFi.localIP());
Serial.println("/");
}

18
In loop()
Shares function you will have to program what happens when a new client establishes a connection
with the web server. The ESP8266 is always listening to the incoming clients using server.available(); and
store the incoming data to a string variable and print the data on the serial monitor.

void loop()
{
WiFiClient client = server.available();
if (!client)
{
return;
}
Serial.println("Waiting for new client");

while(!client.available())
{
delay(1);
}

String request = client.readStringUntil('\r');

Serial.println(request);
client.flush();

LED is initialize as low means LED will be in off condition in the starting of the program.
int value = LOW;
if(request.indexOf("/LED=ON") != -1)
{
digitalWrite(LED, HIGH); // Turn LED ON
value = HIGH;
}
if(request.indexOf("/LED=OFF") != -1)
{
digitalWrite(LED, LOW); // Turn LED OFF
value = LOW;

https://iotdesignpro.com/projects/esp8266-based-webserver-to-control-led-from-webpage 5/22
5/19/23, 1:41 AM ESP8266 Based Webserver to Control LED from Webpage

(/)


18
Shares

₹164 ₹550 ₹2,115 ₹4,1

NEW

HTML code for ESP8266 Webserver

Creating the web page in HTML  which is most important for this project, The ESP8266 will send a
response to your browser with some HTML code to build the web page. – Here we have embedded the
complete HTML code in Arduino code using client.println. The complete code is given at the end.

The HTML code to create two buttons ‘ON’ and ‘OFF’ on the webpage, is mentioned below: 

https://iotdesignpro.com/projects/esp8266-based-webserver-to-control-led-from-webpage 6/22
5/19/23, 1:41 AM ESP8266 Based Webserver to Control LED from Webpage

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

(/) text/html");
client.println("Content-Type:

client.println("");
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.print(" CONTROL LED: ");

if(value == HIGH)
18 {
Shares
client.print("ON");
}
else
{
client.print("OFF");
}
client.println("<br><br>");
client.println("<a href=\"/LED=ON\"\"><button>ON</button></a>");
client.println("<a href=\"/LED=OFF\"\"><button>OFF</button></a><br />");
client.println("</html>");

delay(1);
Serial.println("Client disonnected");
Serial.println("");
}

Program your ESP8266 NodeMCU with Arduino IDE

Now you are in a stage to upload the code in your ESP32 and perform the project, for this following
steps should be performed:
Connect your ESP8266 to your PC via USB cable and make circuit as given above.
Open your Arduino IDE and copy this code to your IDE window but make sure that you provide
correct WiFi credentials of your network.
Now go to Tools--> Board-->  NodeMCU module.
Now go to Tools-->Port and select port to which yourNodeCU is connected.
Now click on upload to upload the code.

If your program run successfully your serial monitor will look like this:

https://iotdesignpro.com/projects/esp8266-based-webserver-to-control-led-from-webpage 7/22
5/19/23, 1:41 AM ESP8266 Based Webserver to Control LED from Webpage

(/)


18
Shares

Now open your serial monitor and press reset button of your ESP8266 and now your ESP starts
connecting to your network, once connected it will give you IP of this ESP.
Then open the browser and copy the IP address from serial monitor and you will find the following
webpage.

From this webpage, you can control your LED and you can see on serial monitor as well what happening
on the background.
This is how you are successfully able to create a webserver and control LED from the webpage. Like this,
you can also control Home appliances from anywhere in the world using ESP8266 webserver. Also, check
our previous article for creating (https://iotdesignpro.com/projects/control-led-using-esp32-based-
webserver)webserver (https://iotdesignpro.com/projects/control-led-using-esp32-based-webserver)
using ESP32 (https://iotdesignpro.com/projects/control-led-using-esp32-based-webserver).

Code
#include <ESP8266WiFi.h>

const char* ssid = "Wi-Fi Name";    //  Your Wi-Fi Name

const char* password = "Password";   // Wi-Fi Password

https://iotdesignpro.com/projects/esp8266-based-webserver-to-control-led-from-webpage 8/22
5/19/23, 1:41 AM ESP8266 Based Webserver to Control LED from Webpage

int LED = 2;   // led connected to GPIO2 (D4)

WiFiServer server(80);
(/)

void setup()
{
  Serial.begin(115200); //Default Baudrate
  pinMode(LED, OUTPUT);
  digitalWrite(LED, LOW);
18
  Serial.print("Connecting
Shares to the Newtork");
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED)
 {
    delay(500);
    Serial.print(".");
 }
  Serial.println("WiFi connected"); 
  server.begin();  // Starts the Server
  Serial.println("Server started");

  Serial.print("IP Address of network: "); // will IP address on Serial Monitor

  Serial.println(WiFi.localIP());
  Serial.print("Copy and paste the following URL: https://"); // Will print IP address in URL format
  Serial.print(WiFi.localIP());
  Serial.println("/");
}

void loop()
{
  WiFiClient client = server.available();
  if (!client)
 {
    return;
 }
  Serial.println("Waiting for new client");
  while(!client.available())
 {
    delay(1);
 }

  String request = client.readStringUntil('\r');

  Serial.println(request);
  client.flush();

  int value = LOW;

  if(request.indexOf("/LED=ON") != -1)
 {

https://iotdesignpro.com/projects/esp8266-based-webserver-to-control-led-from-webpage 9/22
5/19/23, 1:41 AM ESP8266 Based Webserver to Control LED from Webpage

    digitalWrite(LED, HIGH); // Turn LED ON

    value = HIGH;
(/)
 } 
  if(request.indexOf("/LED=OFF") != -1)
 {
    digitalWrite(LED, LOW); // Turn LED OFF
    value = LOW;
 }
18
//*------------------HTML
Shares Page Code---------------------*//

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

  client.println("Content-Type: text/html");
  client.println("");
  client.println("<!DOCTYPE HTML>");
  client.println("<html>");

  client.print(" CONTROL LED: ");

  if(value == HIGH)
 {
    client.print("ON");
 }
  else
 {
    client.print("OFF");
 }
  client.println("<br><br>");
  client.println("<a href=\"/LED=ON\"\"><button>ON</button></a>");
  client.println("<a href=\"/LED=OFF\"\"><button>OFF</button></a><br />");
  client.println("</html>");

  delay(1);
  Serial.println("Client disonnected");
  Serial.println("");
}

Video

https://iotdesignpro.com/projects/esp8266-based-webserver-to-control-led-from-webpage 10/22
5/19/23, 1:41 AM ESP8266 Based Webserver to Control LED from Webpage

ESP8266 Based Webserver

(/) to …


18
Shares

Tags
ESP8266 (/TAGS/ESP8266) WEBSERVER (/TAGS/WEBSERVER)

HOME AUTOMATION (/TAGS/HOME-AUTOMATION)

RELATED ARTICLES

ESP8266 ESP8266

24 Apr, 2023 10 Oct, 2022
IoT Based Heartbeat Monitoring System using How to build LoRa Based GPS Tracker Using
NodeMCU (/projects/iot-based-heartbeat- ESP8266 (/projects/how-to-make-lora-based-
monitoring-system-using-nodemcu) gps-tracker-using-esp8266)

ARDUINO ESP8266 ESP8266

https://iotdesignpro.com/projects/esp8266-based-webserver-to-control-led-from-webpage 11/22
5/19/23, 1:41 AM ESP8266 Based Webserver to Control LED from Webpage

22 Jan, 2021 08 Jan, 2021
Getting Started with ESPHome: (/)How to Install IoT based Voice Controlled Neopixel LED – Set
and Integrate it with Home Assistant? any Colour using Voice Commands on  Google
(/projects/getting-started-with-esphome-how- Assistant (/projects/iot-based-voice-controlled-
to-install-and-integrate-with-home-assistant) neopixel-led-using-blynk-and-google-assistant)

18
Shares

ESP8266 ESP8266

06 Oct, 2020 01 Aug, 2020
IoT Based Water Level Indicator Using IoT Based Motion Detector (/projects/iot-based-
Ultrasonic Sensor (/projects/iot-based-water- motion-detector)
level-indicator-using-ultrasonic-sensor)

7 COMMENTS

MILEKICMILOS
28 June
2020 browser cant reach server (/comment/13#comment-13)
Permalink I am a noob at this. Why is the browser not able to reach the server. It times out?
(/comment/13#comment-
13)
REPLY (/COMMENT/REPLY/NODE/26/COMMENT/13)

CARLOS
5 October
2020 Really thank you guys ,… (/comment/163#comment-163)
Permalink Really thank you guys , great work , it help me a lot in my project . Do you guys work on fr
(/comment/163#comment-
163) eelance . thanks a lot .***** five star coding and it works straight out the code .

REPLY (/COMMENT/REPLY/NODE/26/COMMENT/163)

ANDY
9 March
2022 Another one that doesn't… (/comment/92487#comment-9248
Permalink 7)
(/comment/92487#comment-
92487) Another one that doesn't work and nobody replys too :(

REPLY (/COMMENT/REPLY/NODE/26/COMMENT/92487)

https://iotdesignpro.com/projects/esp8266-based-webserver-to-control-led-from-webpage 12/22
5/19/23, 1:41 AM ESP8266 Based Webserver to Control LED from Webpage

kyrie 9
(http://www.kyrie9.com)
11 April
I intended(/)to write you that… (/comment/146090#comment-1
2023 46090) 
Permalink
I intended to write you that bit of note to be able to give many thanks the moment again
(/comment/146090#comment-
146090) just for the unique solutions you have discussed on this site. It has been certainly serious
ly open-handed of people like you to give unreservedly all a lot of people could possibly h
ave offered for sale for an ebook in order to make some dough on their own, principally s
ince you could have done it if you decided. The good ideas additionally acted as the fanta
18 stic way to comprehend most people have similar keenness just as my personal own to s
Shares
ee a good deal more in terms of this issue. I'm certain there are millions of more pleasant
opportunities in the future for individuals that browse through your site.

REPLY (/COMMENT/REPLY/NODE/26/COMMENT/146090)

kd shoes
(http://www.kd13shoes.us)
21 April
I enjoy you because of all… (/comment/148191#comment-148
2023 191)
Permalink
I enjoy you because of all of your hard work on this blog. My mom delights in carrying out
(/comment/148191#comment-
148191) internet research and it is simple to grasp why. We all hear all concerning the dynamic m
ode you present reliable tips by means of your web site and encourage participation fro
m some others on that theme plus my child is without a doubt starting to learn a lot of th
ings. Have fun with the remaining portion of the new year. You are always conducting a s
plendid job.

REPLY (/COMMENT/REPLY/NODE/26/COMMENT/148191)

golden
goose r…
You should take part
(http://www.goldengoosesstore.com/running- in a… (/comment/148342#comment-148
sole-c-
1_3)
342)
22 April You should take part in a contest for the most effective blogs on the web. I will suggest th
2023
is site!
Permalink
(/comment/148342#comment-
148342) REPLY (/COMMENT/REPLY/NODE/26/COMMENT/148342)

golden
goose
kids There are some attention… (/comment/150937#comment-150
937)
(http://www.goldengooseonlinestore.com)
9 May 2023
Permalink There are some attention-grabbing cut-off dates in this article however I don抰 know if I s
ee all of them center to heart. There's some validity but I'll take hold opinion till I look int
(/comment/150937#comment-
150937)
o it further. Good article , thanks and we wish extra! Added to FeedBurner as nicely

REPLY (/COMMENT/REPLY/NODE/26/COMMENT/150937)

https://iotdesignpro.com/projects/esp8266-based-webserver-to-control-led-from-webpage 13/22
5/19/23, 1:41 AM ESP8266 Based Webserver to Control LED from Webpage
ADD NEW COMMENT

(/)

YOUR NAME

EMAIL

18
The
Shares content of this field is kept private and will not be shown publicly.

COMMENT

No HTML tags allowed. About text formats (/filt

Lines and paragraphs break automatically.
Web page addresses and email addresses turn into links automatically.

SAVE PREVIEW

https://iotdesignpro.com/projects/esp8266-based-webserver-to-control-led-from-webpage 14/22
5/19/23, 1:41 AM ESP8266 Based Webserver to Control LED from Webpage

(/)


18
Shares

https://iotdesignpro.com/projects/esp8266-based-webserver-to-control-led-from-webpage 15/22
5/19/23, 1:41 AM ESP8266 Based Webserver to Control LED from Webpage

(/)


18
Shares

https://iotdesignpro.com/projects/esp8266-based-webserver-to-control-led-from-webpage 16/22
5/19/23, 1:41 AM ESP8266 Based Webserver to Control LED from Webpage

(/)


18
Shares

https://iotdesignpro.com/projects/esp8266-based-webserver-to-control-led-from-webpage 17/22
5/19/23, 1:41 AM ESP8266 Based Webserver to Control LED from Webpage

(/)


18
Shares

https://iotdesignpro.com/projects/esp8266-based-webserver-to-control-led-from-webpage 18/22
5/19/23, 1:41 AM ESP8266 Based Webserver to Control LED from Webpage

(/)


18
Shares

https://iotdesignpro.com/projects/esp8266-based-webserver-to-control-led-from-webpage 19/22
5/19/23, 1:41 AM ESP8266 Based Webserver to Control LED from Webpage

(/)


18
Shares

https://iotdesignpro.com/projects/esp8266-based-webserver-to-control-led-from-webpage 20/22
5/19/23, 1:41 AM ESP8266 Based Webserver to Control LED from Webpage

(/)


18
Shares

https://iotdesignpro.com/projects/esp8266-based-webserver-to-control-led-from-webpage 21/22
5/19/23, 1:41 AM ESP8266 Based Webserver to Control LED from Webpage

(/)


IoTDesignPro is a one-of-a-kind, Internet of Things Community focused on exploring the latest

advancements and technologies in the field of IoT.
POPULAR HARDWARE PLATFORMS

18 Raspberry Pi (https://iotdesignpro.com/raspberry-pi-projects)
Shares
Arduino (https://iotdesignpro.com/iot-arduino-projects)
ESP8266 (https://iotdesignpro.com/esp8266-projects)
ESP32 (https://iotdesignpro.com/esp32-projects)
INFORMATION

About Us (https://iotdesignpro.com/about-us)

Contact Us (https://iotdesignpro.com/contact)

Cookie Policy (https://iotdesignpro.com/cookie-policy)

Privacy Policy (https://iotdesignpro.com/privacy-policy)

NEWSLETTER SUBSCRIPTION

Stay Informed - Subscribe to our Newsletter.

SUBSCRIBE

Copyright © IoTDesignPro 2021. All Rights Reserved.

https://iotdesignpro.com/projects/esp8266-based-webserver-to-control-led-from-webpage 22/22