Basic Web Buttons Using Ethernet Shield

hey guys i have been looking into this for some time now, and this topic is one i have been struggling with since i have started with arduino. I am new to programming and i just cant seem to get past how to make my html button control a pin on my uno. I have done nothing but read forums on how to get this done, but I guess i need a nudge in the right direction. I also have seen alot of rudeness in these forums, I dont care for someone to be rude to me and belittle me because I dont know what Im doing. I have been in network engineering for most of my life so I am not new to hardware. Its the software and programming where my skills fall short. So please be patient and give me a nudge. I dont want you to write the code for me I just need some ideas. Ok so here is my simple html webpage built in dream weaver. I currently have two buttons built. one to OPEN my garage door and One to Close my Garage door.

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
reddish {
	color: #800000;
label {
	color: #800000;
label {
	color: #008080;

<h1 align="center"><em><strong>Welcome To Your Smart Home</strong></em></h1>
<p align="center"><em><strong>Choose Option To Control Your Home</strong></em></p>
<p align="center">&nbsp;</p>
<h1 align="center">
	<form method="get">
  <input type="button" name="opengarage" id="opengarage" value="OPEN"> 
<label> Garage
	<form method="get">
    <input type="button" name="closegarage" id="closegarage" value="CLOSE">
<p align="center">&nbsp;</p>

Link for my site is

lets say that i want my open button to control pin 10 for instance. I havent built my circuit yet, so the specific pin hasnt been assigned yet. I will eventually wire my complete house for every pic and multiple boards.

so where do i start and can someone give me a template for the code? Like i said i dont want you do right it for me but this stuff is so difficult for me to understand for some reason. I have read alot of tutorials and i have looked at zoomkats tests code but Im lost in the sauce. Please someone give me a nudge thanks guys! so if you dont have something productive or nice to say, please do not reply. Thanks in advance!

here is my web server code currently

  Program:      eth_websrv_SD

  Description:  Arduino web server that serves up a basic web
                page. The web page is stored on the SD card.
  Hardware:     Arduino Uno and official Arduino Ethernet
                shield. Should work with other Arduinos and
                compatible Ethernet shields.
                2Gb micro SD card formatted FAT16
  Software:     Developed using Arduino 1.0.3 software
                Should be compatible with Arduino 1.0 +
                SD card contains web page called index.htm
  References:   - WebServer example by David A. Mellis and 
                  modified by Tom Igoe
                - SD card examples by David A. Mellis and
                  Tom Igoe
                - Ethernet library documentation:
                - SD Card library documentation:

  Date:         10 January 2013
  Author:       W.A. Smith,

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

// MAC address from Ethernet shield sticker under board
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 1, 177); // IP address, may need to change depending on network
EthernetServer server(80);  // create a server at port 80

File webFile;

void setup()
    Ethernet.begin(mac, ip);  // initialize Ethernet device
    server.begin();           // start to listen for clients
    Serial.begin(9600);       // for debugging
    // initialize SD card
    Serial.println("Initializing SD card...");
    if (!SD.begin(4)) {
        Serial.println("ERROR - SD card initialization failed!");
        return;    // init failed
    Serial.println("SUCCESS - SD card initialized.");
    // check for index.htm file
    if (!SD.exists("index.htm")) {
        Serial.println("ERROR - Can't find index.htm file!");
        return;  // can't find index file
    Serial.println("SUCCESS - Found index.htm file.");

void loop()
    EthernetClient client = server.available();  // try to get client

    if (client) {  // got client?
        boolean currentLineIsBlank = true;
        while (client.connected()) {
            if (client.available()) {   // client data available to read
                char c =; // read 1 byte (character) from client
                // last line of client request is blank and ends with \n
                // respond to client only after last line received
                if (c == '\n' && currentLineIsBlank) {
                    // send a standard http response header
                    client.println("HTTP/1.1 200 OK");
                    client.println("Content-Type: text/html");
                    client.println("Connection: close");
                    // send web page
                    webFile ="index.htm");        // open web page file
                    if (webFile) {
                        while(webFile.available()) {
                            client.write(; // send web page to client
                // every line of text received from the client ends with \r\n
                if (c == '\n') {
                    // last character on line of received text
                    // starting new line with next character read
                    currentLineIsBlank = true;
                else if (c != '\r') {
                    // a text character was received from client
                    currentLineIsBlank = false;
            } // end if (client.available())
        } // end while (client.connected())
        delay(1);      // give the web browser time to receive the data
        client.stop(); // close the connection
    } // end if (client)

Moderator edit: The usual. {sigh}. AWOL

so where do i start and can someone give me a template for the code?

There is a WebServer example. That example serves up a web page. You seem to, at least, have an idea what the page should look like.

Start with making the Arduino serve that page.

The example shows what the GET request looks like (though that may be commented out). If it is, uncomment the appropriate write() or print() statement. Then, compare the difference between an initial request and a request as a result of clicking one of the submit buttons on the form.

It should be pretty obvious exactly what the differences are. The Arduino can be programmed to detect the differences, and to react appropriately.

But, it is not an all at once project. Take small steps. If you encounter difficulties, come on back.

I also have seen alot of rudeness in these forums, I dont care for someone to be rude to me and belittle me because I dont know what Im doing.

Don’t mind the rudeness as some were probably born with a broom stick where the sun doesn’t shine and can’t help themselves. Below is some simple web page button code that might be of use. You can open the serial monitor to see what is being received by the server.

//zoomkat 8-04-12
//simple button GET server code to control servo and arduino pins 5, 6, and 7
//for use with IDE 1.0
//open serial monitor to see what the arduino receives
//use ' instead of " in the html 
//address will look like when submited
//for use with W5100 based ethernet shields
///note that the below bug fix may be required

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

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 192, 168, 1, 102 }; // ip in lan
byte gateway[] = { 192, 168, 1, 1 }; // internet access via router
byte subnet[] = { 255, 255, 255, 0 }; //subnet mask
EthernetServer server(84); //server port

String readString; 


void setup(){

  pinMode(5, OUTPUT); //pin selected to control
  pinMode(6, OUTPUT); //pin selected to control
  pinMode(7, OUTPUT); //pin selected to control
  pinMode(8, OUTPUT); //pin selected to control
  //start Ethernet
  Ethernet.begin(mac, ip, gateway, gateway, subnet);

  //enable serial data print 
  Serial.println("server multi pin button test 1.0"); // so I can keep track of what is loaded

void loop(){
  // Create a client connection
  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c =;

        //read char by char HTTP request
        if (readString.length() < 100) {

          //store characters to string 
          readString += c; 

        //if HTTP request has ended
        if (c == '\n') {

          Serial.println(readString); //print to serial monitor for debuging 

          client.println("HTTP/1.1 200 OK"); //send new page
          client.println("Content-Type: text/html");

          client.println("<TITLE>Arduino GET test page</TITLE>");

          client.println("<H1>Zoomkat's simple Arduino button</H1>");
          // For simple testing, pin 5, 6, 7, and 8 are used in buttons
          // DIY buttons
          client.println("<a href=/?on2 >ON</a>"); 
          client.println("<a href=/?off3 >OFF</a>"); 
          client.println("&nbsp;<a href=/?off357 >ALL OFF</a>


          // mousedown buttons
          client.println("<input type=button value=ON onmousedown=location.href='/?on4;'>"); 
          client.println("<input type=button value=OFF onmousedown=location.href='/?off5;'>");        
          client.println("&nbsp;<input type=button value='ALL OFF' onmousedown=location.href='/?off3579;'>

          // mousedown radio buttons
          client.println("<input type=radio onmousedown=location.href='/?on6;'>ON</>"); 
          client.println("<input type=radio onmousedown=location.href='/?off7;'>OFF</>"); 
          client.println("&nbsp;<input type=radio onmousedown=location.href='/?off3579;'>ALL OFF</>

          // custom buttons
          client.print("<input type=submit value=ON style=width:100px;height:45px onClick=location.href='/?on8;'>");
          client.print("<input type=submit value=OFF style=width:100px;height:45px onClick=location.href='/?off9;'>");
          client.print("&nbsp;<input type=submit value='ALL OFF' style=width:100px;height:45px onClick=location.href='/?off3579;'>");

          //stopping client

          ///////////////////// control arduino pin
          if(readString.indexOf('2') >0)//checks for 2
            digitalWrite(5, HIGH);    // set pin 5 high
            Serial.println("Led 5 On");
          if(readString.indexOf('3') >0)//checks for 3
            digitalWrite(5, LOW);    // set pin 5 low
            Serial.println("Led 5 Off");
          if(readString.indexOf('4') >0)//checks for 4
            digitalWrite(6, HIGH);    // set pin 6 high
            Serial.println("Led 6 On");
          if(readString.indexOf('5') >0)//checks for 5
            digitalWrite(6, LOW);    // set pin 6 low
            Serial.println("Led 6 Off");
           if(readString.indexOf('6') >0)//checks for 6
            digitalWrite(7, HIGH);    // set pin 7 high
            Serial.println("Led 7 On");
          if(readString.indexOf('7') >0)//checks for 7
            digitalWrite(7, LOW);    // set pin 7 low
            Serial.println("Led 7 Off");
            if(readString.indexOf('8') >0)//checks for 8
            digitalWrite(8, HIGH);    // set pin 8 high
            Serial.println("Led 8 On");
          if(readString.indexOf('9') >0)//checks for 9
            digitalWrite(8, LOW);    // set pin 8 low
            Serial.println("Led 8 Off");
          //clearing string for next read