IoT Home Automation using ESP8266 Web Server

Overview: Home Automation using ESP8266 Web Server
In this project, we learn how to make
IoT Based Home Automation using ESP8266 Web Server
. By Home Automation we mean controlling lighting and appliances without any
manual switch
but using a system that is connected to the Internet. When connected to the Internet, home devices are an important constituent of the
Internet of Things
(“IoT”).
In this project, we will be using a Local
Web Server
. A web server is a device that runs websites. It’s a program or a bunch of code that distributes web pages as they are requisitioned. The basic objective of the Web Server is to store, process, and deliver web pages to the users. This intercommunication is done using Hypertext Transfer Protocol (HTTP).
In this
Home Automation System
, we will control
4 home appliances
connected to the
Relay
using a Local Web Server. The Wifi Module
NodeMCU ESP8266
will Receive commands from the Web Page.
Before moving forward with this project, you can check our previous project:

Home Automation using NodeMCU & Alexa

Wifi & Voice Controlled Home Automation Using NodeMCU & Android

IoT Home Automation using Blynk & NodeMCU ESP8266

Home Automation using Google Firebase & NodeMCU ESP8266

Home Automation with Arduino IoT Cloud & ESP32

Industrial Automation using ESP8266 & AWS IoT Core
Bill of Materials
The following are the
components
required for making this project. All the components can be easily purchased from
Amazon
. The component purchase link is given below.
S.N.
Components Name
Quantity
Purchase Links

NodeMCU ESP8266

Amazon
AliExpress

Relay 5V

Amazon
AliExpress

7805 Voltage Regulator IC

Amazon
AliExpress

Female DC Power Jack DCJ0202

Amazon
AliExpress

Diode 1N4007

Amazon
AliExpress

Resistor 330-ohm

Amazon
AliExpress

NPN Transistor BC547

Amazon
AliExpress

Terminal Block

Amazon
AliExpress

LED 5mm Any Color

Amazon
AliExpress

Female Header
2 Set
Amazon
AliExpress
Circuit Diagram & Connection
The circuit diagram for
Web Server Controlled Home Automation
using ESP8266 is given below. Using this circuit diagram you can assemble the circuit on the Breadboard using 4 4-channel Relay and NodeMCU Board.
Home Automation PCB & Gerber File
If you don’t want to assemble the circuit on a breadboard and you want a PCB for the project, then here is the PCB for you. The PCB Board for the Home Automation Project is designed using the
EasyEDA
online Circuit Schematics & PCB designing tool. The front side and back side of the PCB are given below.
Home Automation PCB Front View
Home Automation PCB Back View
The Gerber File for the
PCB Board
is given below. You can simply download the Gerber File for this project.
Download Gerber File:
Home Automation PCB
Source Code/Program
Copy the code from below and upload it to the NodeMCU Board.

const
char
*
ssid
=
"MySmartHome"
;
//wifi name
const
char
*
password
=
"hngzhowxiantan"
;
//wifi password
But before uploading change the WiFi SSID & Password.

#include <ESP8266WiFi.h>
// Replace with your network credentials
const
char
*
ssid
=
"MySmartHome"
;
//wifi name
const
char
*
password
=
"hngzhowxiantan"
;
//wifi password
// Set web server port number to 80
WiFiServer
server
(

)
;
// Variable to store the HTTP request
String
header
;
// Auxiliar variables to store the current output state
String
output0State
=
"off"
;
String
output1State
=
"off"
;
String
output2State
=
"off"
;
String
output3State
=
"off"
;
// Assign output variables to GPIO pins
const
int
output0
=
D2
;
//GPIO4
const
int
output1
=
D5
;
//GPIO14
const
int
output2
=
D6
;
//GPIO12
const
int
output3
=
D1
;
//GPIO5
void
setup
(
)
{
Serial
begin
(
115200
)
;
// Initialize the output variables as outputs
pinMode
(
output0
OUTPUT
)
;
pinMode
(
output1
OUTPUT
)
;
pinMode
(
output2
OUTPUT
)
;
pinMode
(
output3
OUTPUT
)
;
// Set outputs to LOW
digitalWrite
(
output0
LOW
)
;
digitalWrite
(
output1
LOW
)
;
digitalWrite
(
output2
LOW
)
;
digitalWrite
(
output3
LOW
)
;
// Connect to Wi-Fi network with SSID and password
Serial
(
"Connecting to "
)
;
Serial
println
(
ssid
)
;
WiFi
begin
(
ssid
password
)
;
while
(
WiFi
status
(
)
!=
WL_CONNECTED
)
{
delay
(

)
;
Serial
(
"."
)
;
}
// 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
while
(
client
connected
(
)
)
{
// 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
(
)
==

)
{
// 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
(
"Content-type:text/html"
)
;
client
println
(
"Connection: close"
)
;
client
println
(
)
;
// turns the GPIOs on and off
if
(
header
indexOf
(
"GET /4/on"
)
>=

)
{
Serial
println
(
"GPIO 4 on"
)
;
output0State
=
"on"
;
digitalWrite
(
output0
HIGH
)
;
}
else
if
(
header
indexOf
(
"GET /4/off"
)
>=

)
{
Serial
println
(
"GPIO 4 off"
)
;
output0State
=
"off"
;
digitalWrite
(
output0
LOW
)
;
}
// turns the GPIOs on and off
else
if
(
header
indexOf
(
"GET /14/on"
)
>=

)
{
Serial
println
(
"GPIO 14 on"
)
;
output1State
=
"on"
;
digitalWrite
(
output1
HIGH
)
;
}
else
if
(
header
indexOf
(
"GET /14/off"
)
>=

)
{
Serial
println
(
"GPIO 14 off"
)
;
output1State
=
"off"
;
digitalWrite
(
output1
LOW
)
;
}
// turns the GPIOs on and off
else
if
(
header
indexOf
(
"GET /12/on"
)
>=

)
{
Serial
println
(
"GPIO 12 on"
)
;
output2State
=
"on"
;
digitalWrite
(
output2
HIGH
)
;
}
else
if
(
header
indexOf
(
"GET /12/off"
)
>=

)
{
Serial
println
(
"GPIO 12 off"
)
;
output2State
=
"off"
;
digitalWrite
(
output2
LOW
)
;
}
// turns the GPIOs on and off
else
if
(
header
indexOf
(
"GET /5/on"
)
>=

)
{
Serial
println
(
"GPIO 5 on"
)
;
output3State
=
"on"
;
digitalWrite
(
output3
HIGH
)
;
}
else
if
(
header
indexOf
(
"GET /5/off"
)
>=

)
{
Serial
println
(
"GPIO 5 off"
)
;
output3State
=
"off"
;
digitalWrite
(
output3
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:,\">"
)
;
// CSS to style the on/off buttons
// Feel fre