How to use an Arduino as a Web Server.

details

Description:

Using an Ethernet shield, you can use an Arduino as a Web server.By equipping an Arduino with an Ethernet shield you can turn it into a simple web server, and by accessing that server with a browser running on any computer connected to the same network as the Arduino, you can:

Control hardware from the webpage (using Javascript buttons).
Read the state of a switch (using simple HTML).
Read value of a sensor (using simple HTML).

Hardware required

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

Arduino Mega2560 (or Arduino UNO)
Ethernet shield
9V Adaptor
pushbutton
Wired LAN Connection with speed of 10/100Mb

The Ethernet shield connects the Arduino to the Internet. The setup is very simple: just plug the header pins of the shield into your Arduino, then connect an Ethernet cable to the shield.

Wiring Diagram:

Connect the components as shown above. Arduino’s pin 8 is connected to the pushbutton and is configured as INPUT. When the button is pushed, the Arduino will read a LOW value on this pin. The Arduino will then set the status of the OUTPUT to ON. When it is released, the output will be set to OFF. The status of the switch will be sent to the Web server.
Ethernet configuration:
To control the Ethernet shield, you use the Ethernet.h library.

The shield must be assigned a MAC and IP address using the Ethernet.begin() function. For a particular device, a MAC address is a globally unique identifier. Current Ethernet shields come with a sticker indicating the MAC address. For older shields, a random one should work, but one should not use the same one for many boards. Validity of IP addresses depends on the configuration of one’s network. If DHCP is used, it may dynamically assign an IP to the shield.

IP ADDRESS

IP address (Internet Protocol address) is a numerical label assigned to each device participating in a computer network that uses the Internet Protocol for communication. Specifying the IP address is done by writing the line:

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

and change it to match one own setup. For example, to assign the IP of Ethernet shield to 192.168.0.50, write the line:

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

MAC ADDRESS:
MAC address (media access control address) is a unique identifier assigned to each device participating in a physical network. Each piece of networking equipment has a unique serial number to identify itself over a network and this is normal hard-programmed into the equipment’s firmware. However, with Arduino, we can define the MAC address ourself.

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

You can set the subnet and gateway with the help of following commands:

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

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

So, to setup Ethernet Shield, the block of code is given below:

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

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

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

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

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

Below is a photo of the system, showing how the Arduino connects to the Wi-Fi router. The Ethernet cable connects shield with the router and router then connects wirelessly with the laptop.

Below is a program that loads 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>");

You can also set this up to run without the router. To do this you need to:

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.
Use a cross-over Ethernet cable to link the two (laptop and Arduino).
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();

}

Demo: