ESP8266 Based Webserver to Control LED from Webpage
How to create simple ESP8266 NodeMCU web server in Arduino IDE. You will learn to control GPIO pins of ESP8266 NodeMCU from a basic Web server.
You also get to know about creating password protected web server with ESP8266 based NodeMCU board. Although, you can use this tutorial for any type of ESP8266 board like ESP01, ESP12.
ESP8266 Based Webserver to Control LED from Webpage
Here we used Arduino development boards to new ESP8266 development boards like NodeMCU and Wemos D1 development boards.
The reason behind this switching is to communicate and control the development board remotely from a internet by creating a simple web server.
Yes, this is true that we can communicate and control Arduino boards through interfacing externals modules like Bluetooth RF and IR but there are many practical limitations and these techniques are not much efficient while comparing with modules having on board WiFi Like ESP8266 NodeMCU modules.
There are different ways to communicate ESP8266 development boards like Android application through WiFi, Web server through WiFi, and Serial communication with PC through the wire.
In this tutorial, you will learn how to create Web server to control the GPIO’s of the development board through buttons on Web server and to protect your Web server with password from unauthorized user access.
We can access our Web server from the smartphone, tablet, laptop, and desktop personal computer.
Controlling LEDs with ESP8266 Web Server NodeMCU
By controlling GPIO’s of the development boards through Web server, we can connect LEDs, Relays, Servo motors, and so on.
But in this tutorial, we will make Web servers with four buttons to control LEDs and to update the status of the LEDs on the Web server.
Components Required
1. ESP8266 Development Board.
2. LEDs – 4 nos
3. Resistors (100 ohms)
4. Jumper Wires
5. Breadboard
6. Micro USB cable
7. Smartphone
8. Arduino IDE
ESP8266 NodeMCU Web Server Circuit
For practical demonstration purpose, we are controlling through LEDs through a web server. Connection diagram for this functionality is shown below.
We need four LEDs with suitable resistors, NodeMCU, breadboard and jumper wires. One terminal of resistors is connected to the cathode of each LED and other terminal connected to the ground pin.
Anodes of the LEDs connected to D1 to D4 pins of NodeMCU respectively.
Writing Sketch for ESP8266 Web server
First of all, we have to include ESP8266WiFi library so that we can use built-in function to connect to WiFi.
Then we have to write the network credential which includes the name and the password.
Make sure write your network credentials correctly otherwise, you will not be able to connect with the network. After this we have to describe the server port number, in this case,
I write 443 which is Secure Hyper Text Transfer Protocol (HTTPS). We can also use the different port number like 80 which is not that secure to use.
How to Open NodeMCU based Web Server
1. After uploading the code open the serial monitor and wait until NodeMCU connected with WiFi network, the Web server initiated and display IP address as shown below. If you facing a problem in getting IP address just simply press the reset button on the NodeMCU.
2. Note the IP address and open your web browser on PC and write the IP address on the URL search tab followed by a colon (:) server port number, in this case, 192.168.18.45:443.
If you entered the correct IP address and server port you will see a window asking for user name and password as shown in the picture.
3. If you entered the right credentials so you will be given the access to the main web page. You can click the desired button to perform the operation.
4. To open the Web server using smartphone open your browser on the smartphone write the IP address shown up in the serial monitor and IP address followed by a colon (:) and server port number in my case 192.168.18.45:443
5. If you entered the right credentials so you will be given the access to the main web page. You can click the desired button to perform the operation.
What’s the password to log into the webserver?
And how can it be changed?