Using Arduino as a simple Web Server along with Ethernet shield

Using an Ethernet shield along with Arduino board you can turn it into a simple web server which can be accessed by anyone on the internet, and by accessing that server with a browser running on any computer connected to the same network as the Arduino board, you can:

• Control hardware from the webpage like fan or lights (using Javascript buttons).
  
• Read the state of a switch which can be either ON or OFF (using simple HTML).
  
• Read value of a sensors connected to Arduino board (using simple HTML).

Arduino Board

 

 

Ethernet Shield

Hardware needed:

To use an Arduino Board as a Simple Web server, you need the following:

   DC Voltage of 5V from Arduino - To power the Ethernet Shield
    Ethernet shield - To connect with LAN
    Connection speed: 10/100Mb - For optimum performance.
    Connection with Arduino on SPI port

The Ethernet shield will connect the Arduino board to the Web or Internet. Setup is very simple, Just plug the header pins of the shield into your Arduino, then connect an Ethernet cable to the shield.  In the figure below, you can see an Arduino Mega with an Ethernet shield installed and connected with internet.

Now let's get to the working.

We will demonstrate how to use the Arduino as a Web server,  in the further experiment we will find how Arduino can show the state of a switch through sending information as a web server. Giving it's output in html pages

Components required:

• 1 x Ethernet cable
  
• 1 x Wi-Fi Router (Optional)
  
• 1 x Arduino Mega2560 or Arduino UNO
  
• 1 x Ethernet Shield
  
• 1 x Breadboard or blank circuit board can do as well
  
• 3 x Jumper Wires
  
• 1 x 1k Resistor
  
• 2 x 9VDC Adaptor
  
• 1 x Push button

 Schematic

 Connect the components as shown in the figure above. Pin 8 of the Arduino is connected to the Push button. This pin is configured as an INPUT, and when the button is pushed, the Arduino will read a HIGH value on this pin because the current will start flowing in this part. The Arduino will then set the status of the OUTPUT to ON on the webpage it hosts. When it is released, the output will be set to OFF. The status of the switch will available to the Web server as we need it.

Ethernet design

To control the Ethernet shield, you utilize the Ethernet.h library.

The shield must be allocated a MAC and IP address utilizing the Ethernet.begin() function. For a specific gadget, a MAC address is an all around extraordinary identifier. Current Ethernet shields accompany a sticker showing the MAC address. For more seasoned shields, an arbitrary one ought to work, however one should not utilize the same MAC address for many Ethernet Shields. Legitimacy of IP address relies on upon the arrangement of one's network. In the event that DHCP is utilized, it might dynamically assign an IP to the shield.

IP ADDRESS

IP address (Internet Protocol address) is a numerical name allotted to every gadget participating in a PC system that uses the Internet Protocol for correspondence. To indicate the IP address which is done inside the system. It is basic:

byte ip[] = { 192, 168, 0, 112 } and change it to match one own setup. For instance, if the switch's IP location is 192.168.0.60, and the scanner has 192.168.0.40, So I will allot the IP of Ethernet shield to 192.168.0.50 with the assistance of taking after order:

byte ip[] = { 192, 168, 0, 50 };

The initial three bytes ought to be same and it should not have similar IP address as any of other devices connect in same LAN.

MAC ADDRESS

MAC address (media access control location) is an exceptional identifier doled out to every gadget taking an interest in a physical system. Every bit of systems administration gear has an one of a kind serial number to recognize itself over a system and this is typical hard-modified into the hardware's firmware. In any case, with Arduino, we can characterize the MAC address our self.

byte mac[] = { 0x90, 0xA2, 0xDA, 0x0D, 0x85, 0xD9 };

You can set the subnet and portal with the assistance of taking after charges:

byte subnet[] = { 255, 255, 255, 0 }; /allocating subnet veil

byte gateway[] = { 192, 168, 0, 1 }; /allocating entryway

Along these lines, to setup Ethernet Shield, the square of code is given below:

/********************ETHERNET SETTINGS ********************/

byte mac[] = { 0x90, 0xA2, 0xDA, 0x0D, 0x85, 0xD9 }; /allotting MAC address

byte ip[] = { 192, 168, 0, 112 }; /ip in lan

byte subnet[] = { 255, 255, 255, 0 }; /allotting subnet mask

byte gateway[] = { 192, 168, 0, 1 }; /allotting default gateway

The following is a picture of the connection, demonstrating how the Arduino board unites with the Wi-Fi switch. The Ethernet link associate shield with the switch and switch then join remotely with the portable workstation. Or you can just connect the Ethernet shield directly to your home router or switch.

Program
Below is the script that outputs HTML of a simple Web page.

client.println("<!DOCTYPE html>"); //web page is made using HTML

client.println("<html>");

client.println("<head>");

client.println("<title>Ethernet Tutorial</title>");

client.println("<meta http-equiv=\"refresh\" content=\"1\">");

client.println("</head>");

client.println("<body>");

client.println("<h1>A Webserver Tutorial </h1>");

client.println("<h2>Observing State Of Switch</h2>");

client.print("<h2>Switch is:  </2>");

if (digitalRead(8))

{

client.println("<h3>ON</h3>");

}

else

{

client.println("<h3>OFF</h3>");

}


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

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

This program will display a web page on a Web browser when the IP address assigned to the Arduino is accessed.
The line:

client.println("<http-equiv=\"refresh\" content=\"1\">");

Educates the browser to refresh the page. At the point when the page is accessed once again, the Arduino will again read the switch's status and present it in the output.
Recall that, you can simply see the source code of the displayed Web page. On pushing the push button, you can watch the changing condition of the switch in the webpage.
You can likewise set this up to keep running without the switch. To do this you have to:

1. Assign a manual IP address to the Arduino's Ethernet say 192.168.0.2 and Subnet mask 255.255.255.0 default Gateway empty.
   
2. Use a cross-over Ethernet cable to link the two (laptop and Arduino).
   
3. We should then be able to get your Arduino site up on http://192.168.0.2 from the laptop.
   

Below is the code that you would load into the Arduino to connect it directly to the PC without the router:

#include <SPI.h>
#include <Ethernet.h>


/******************** ETHERNET SETTINGS ********************/

byte mac[] = { 0x90, 0xA2, 0xDA, 0x0D, 0x85, 0xD9 };  //physical mac address
byte ip[] = { 192, 168, 0, 112 };                   // ip in lan
byte subnet[] = { 255, 255, 255, 0 };              //subnet mask
byte gateway[] = { 192, 168, 0, 1 };              // default gateway
EthernetServer server(80);                       //server port


void setup()
{
Ethernet.begin(mac,ip,gateway,subnet);     // initialize Ethernet device
server.begin();                             // start to listen for clients
pinMode(8, INPUT);                         // input pin for switch
}

void loop()
{
EthernetClient client = server.available();   // look for the client

// send a standard http response header

client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connnection: close");
client.println();

/* 
This portion is the webpage which will be
sent to client web browser one can use html , javascript
and another web markup language to make particular layout 
*/

client.println("<!DOCTYPE html>");    //web page is made using html
client.println("<html>");
client.println("<head>");
client.println("<title>Ethernet Tutorial</title>");
client.println("<meta http-equiv=\"refresh\" content=\"1\">");

/*
The above line is used to refresh the page in every 1 second
This will be sent to the browser as the following HTML code:
<meta http-equiv="refresh" content="1">
content = 1 sec i.e assign time for refresh 
*/

client.println("</head>");
client.println("<body>");
client.println("<h1>A Webserver Tutorial </h1>");
client.println("<h2>Observing State Of Switch</h2>");

client.print("<h2>Switch is:  </2>");

if (digitalRead(8))
{
client.println("<h3>ON</h3>");
}
else
{
client.println("<h3>OFF</h3>");
}

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

delay(1);      // giving time to receive the data

/*
The following line is important because it will stop the client
and look for the new connection in the next iteration i.e
EthernetClient client = server.available();
*/
client.stop();

} 

Hope you liked this project. For more projects related to Arduino or any other electronic please message me or write them in the comments.