Web based toggle button

So in my other post about a growduino one of the features I wanted was web based control of lights etc.

So I figured I would start on that first. Based on a tutorial I found I can control pin settings by typing in the ip address of the arduino in a browser followed by "/?" then some numbers to change the pin state. (192.168.1.201/?1 to turn on pin 1 192.168.1.201/?2 to turn off pin 1)

My question now is how can I make a button or link that will do this with out opening a new page? I would like to have the control page running on a separate web server (not the arduino) so I can display sensor data web cam etc. My web server is a basic LAMP server.

here is the code that is running on my arduino now

#include <Ethernet.h>
#include <SPI.h>
boolean reading = false;

////////////////////////////////////////////////////////////////////////
//CONFIGURE
////////////////////////////////////////////////////////////////////////
  byte ip[] = { 192, 168, 1, 201 };   //ip address to assign the arduino
  byte gateway[] = { 192, 168, 1, 1 }; //ip address of the gatewa or router

  //Rarly need to change this
  byte subnet[] = { 255, 255, 255, 0 };

  // if need to change the MAC address (Very Rare)
  byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };

  Server server = Server(80); //port 80
////////////////////////////////////////////////////////////////////////

void setup(){
  //Pins 10,11,12 & 13 are used by the ethernet shield

  
  pinMode(4, OUTPUT);
  pinMode(5, OUTPUT);
  pinMode(6, OUTPUT);
  pinMode(7, OUTPUT);
  
  digitalWrite(4, HIGH);
  digitalWrite(5, HIGH);
  digitalWrite(6, HIGH);
  digitalWrite(7, HIGH);
  
  Ethernet.begin(mac, ip, gateway, subnet);
  server.begin();
}

void loop(){

  // listen for incoming clients, and process qequest.
  checkForClient();

}

void checkForClient(){

  Client client = server.available();

  if (client) {

    // an http request ends with a blank line
    boolean currentLineIsBlank = true;
    boolean sentHeader = false;

    while (client.connected()) {
      if (client.available()) {

        if(!sentHeader){
          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();
          sentHeader = true;
        }

        char c = client.read();

        if(reading && c == ' ') reading = false;
        if(c == '?') reading = true; //found the ?, begin reading the info

        if(reading){
          Serial.print(c);

           switch (c) {
            
            /////////////////////////// 
            case '1':
              switchOn(4, client);
              break;
            case '2':
              switchOff(4, client);
              break;
            //////////////////////////
            case '3':
              switchOn(5,client);
              break;
            case '4':
              switchOff(5,client);
              break;
            ///////////////////////////
            case '5':
              switchOn(6,client);
              break;
            case '6':
              switchOff(6,client);
              break;              
            ////////////////////////////
            case '7':
              switchOn(7,client);
              break;
            case '8':
              switchOff(7,client);
              break;  
          }

        }

        if (c == '\n' && currentLineIsBlank)  break;

        if (c == '\n') {
          currentLineIsBlank = true;
        }else if (c != '\r') {
          currentLineIsBlank = false;
        }

      }
    }

    delay(1); // give the web browser time to receive the data
    client.stop(); // close the connection:

  } 

}

void switchOn(int pin, Client client){

  digitalWrite(pin, LOW);
  
}

void switchOff(int pin, Client client){
 
 digitalWrite(pin, HIGH);
  
}

This question is popular today. Check below for some similar info.