How to host a website that can control the Arudino over Internet

Im doing a Smart Clock Project which requires a Web user interface.
So i wanna ask the following questions:
1.Do i need to have a fixed IP address for the Eternet shield?
2.I have known that Arudino can be controlled by sending orders through internet,
but how can i make a website-looking thingy which has buttons to control the Arduino?

I will really appreciate it if anyone can help me out here,if it is possible, could u also provide some links to the tutorials about that?

Have you looked any of the examples that came with the IDE?

Client/server test code with buttons.

//zoomkat 7-03-12, combined client and server
//simple button GET with iframe code
//for use with IDE 1.0
//open serial monitor and send an g to test client and
//see what the arduino client/server receives
//web page buttons make pin 5 high/low
//use the ' in html instead of " to prevent having to escape the "
//address will look like http://192.168.1.102:84 when submited
//for use with W5100 based ethernet shields
//note that the below bug fix may be required
// http://code.google.com/p/arduino/issues/detail?id=605

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

byte mac[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //assign arduino mac address
byte ip[] = {192, 168, 1, 102 }; // ip in lan assigned to arduino
byte gateway[] = {192, 168, 1, 1 }; // internet access via router
byte subnet[] = {255, 255, 255, 0 }; //subnet mask
EthernetServer server(84); //server port arduino server will use
EthernetClient client;
char serverName[] = "web.comporium.net"; // (DNS) zoomkat's test web page server
//byte serverName[] = { 208, 104, 2, 86 }; // (IP) zoomkat web page server IP address

String readString; //used by server to capture GET request 

//////////////////////

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

  //pinMode(5, OUTPUT); //pin 5 selected to control
  Ethernet.begin(mac,ip,gateway,gateway,subnet); 
  server.begin();
  Serial.begin(9600); 
  Serial.println("server/client 1.0 test 7/03/12"); // keep track of what is loaded
  Serial.println("Send an g in serial monitor to test client"); // what to do to test client
}

void loop(){
  // check for serial input
  if (Serial.available() > 0) 
  {
    byte inChar;
    inChar = Serial.read();
    if(inChar == 'g')
    {
      sendGET(); // call client sendGET function
    }
  }  

  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();

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

          //store characters to string 
          readString += c; 
          //Serial.print(c);
        } 

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

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

            //now output HTML data header
          if(readString.indexOf('?') >=0) { //don't send new page
            client.println(F("HTTP/1.1 204 Zoomkat"));
            client.println();
            client.println();  
          }
          else {   
            client.println(F("HTTP/1.1 200 OK")); //send new page on browser request
            client.println(F("Content-Type: text/html"));
            client.println();

            client.println(F("<HTML>"));
            client.println(F("<HEAD>"));
            client.println(F("<TITLE>Arduino GET test page</TITLE>"));
            client.println(F("</HEAD>"));
            client.println(F("<BODY>"));

            client.println(F("<H1>Zoomkat's simple Arduino 1.0 button</H1>"));

            // DIY buttons
            client.println(F("Pin5"));
            client.println(F("<a href=/?on2 target=inlineframe>ON</a>")); 
            client.println(F("<a href=/?off3 target=inlineframe>OFF</a>

")); 

            client.println(F("Pin6"));
            client.println(F("<a href=/?on4 target=inlineframe>ON</a>")); 
            client.println(F("<a href=/?off5 target=inlineframe>OFF</a>

")); 

            client.println(F("Pin7"));
            client.println(F("<a href=/?on6 target=inlineframe>ON</a>")); 
            client.println(F("<a href=/?off7 target=inlineframe>OFF</a>

")); 

            client.println(F("Pin8"));
            client.println(F("<a href=/?on8 target=inlineframe>ON</a>")); 
            client.println(F("<a href=/?off9 target=inlineframe>OFF</a>

")); 

            client.println(F("Pins"));
            client.println(F("&nbsp;<a href=/?off2468 target=inlineframe>ALL ON</a>")); 
            client.println(F("&nbsp;<a href=/?off3579 target=inlineframe>ALL OFF</a>

")); 

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

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

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

            
            client.println(F("<IFRAME name=inlineframe style='display:none'>"));          
            client.println(F("</IFRAME>"));

            client.println(F("</BODY>"));
            client.println(F("</HTML>"));
          }

          delay(1);
          //stopping client
          client.stop();

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

          //clearing string for next read
          readString="";

        }
      }
    }
  }
} 

//////////////////////////
void sendGET() //client function to send and receive GET data from external server.
{
  if (client.connect(serverName, 80)) {
    Serial.println("connected");
    client.println("GET /~shb/arduino.txt HTTP/1.0");
    client.println();
  } 
  else {
    Serial.println("connection failed");
    Serial.println();
  }

  while(client.connected() && !client.available()) delay(1); //waits for data
  while (client.connected() || client.available()) { //connected or data available
    char c = client.read();
    Serial.print(c);
  }

  Serial.println();
  Serial.println("disconnecting.");
  Serial.println("==================");
  Serial.println();
  client.stop();

}

1.Do i need to have a fixed IP address for the Eternet shield?

No. You need one for the router that the Arduino with Ethernet shield is connected to. Your Arduino with Ethernet shield is local on that network, and the router (the internet facing device) needs to forward requests, for the port that the Arduino is listening to, to the Arduino.

2.I have known that Arudino can be controlled by sending orders through internet,
but how can i make a website-looking thingy which has buttons to control the Arduino?

If you have to ask, I'd guess that the answer is that you can't.

There is nothing different in the HTML code that the Arduino serves up. It is generally a simple form with submit buttons whose action is to call the Arduino again. Google HTML Forms.

AWOL:
Have you looked any of the examples that came with the IDE?

you mean the examples in the Arduino? ya, i did have a look at some of them, but now i wanna have tutorials that can help me understand how everything works so that i can fully understand it and make my own Web interface

zoomkat:
Client/server test code with buttons.

//zoomkat 7-03-12, combined client and server

//simple button GET with iframe code
//for use with IDE 1.0
//open serial monitor and send an g to test client and
//see what the arduino client/server receives
//web page buttons make pin 5 high/low
//use the ' in html instead of " to prevent having to escape the "
//address will look like http://192.168.1.102:84 when submited
//for use with W5100 based ethernet shields
//note that the below bug fix may be required
// Google Code Archive - Long-term storage for Google Code Project Hosting.

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

byte mac[] = {0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //assign arduino mac address
byte ip[] = {192, 168, 1, 102 }; // ip in lan assigned to arduino
byte gateway[] = {192, 168, 1, 1 }; // internet access via router
byte subnet[] = {255, 255, 255, 0 }; //subnet mask
EthernetServer server(84); //server port arduino server will use
EthernetClient client;
char serverName[] = "web.comporium.net"; // (DNS) zoomkat's test web page server
//byte serverName[] = { 208, 104, 2, 86 }; // (IP) zoomkat web page server IP address

String readString; //used by server to capture GET request

//////////////////////

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

//pinMode(5, OUTPUT); //pin 5 selected to control
  Ethernet.begin(mac,ip,gateway,gateway,subnet);
  server.begin();
  Serial.begin(9600);
  Serial.println("server/client 1.0 test 7/03/12"); // keep track of what is loaded
  Serial.println("Send an g in serial monitor to test client"); // what to do to test client
}

void loop(){
  // check for serial input
  if (Serial.available() > 0)
  {
    byte inChar;
    inChar = Serial.read();
    if(inChar == 'g')
    {
      sendGET(); // call client sendGET function
    }
  }

EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();

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

//store characters to string
          readString += c;
          //Serial.print(c);
        }

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

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

//now output HTML data header
          if(readString.indexOf('?') >=0) { //don't send new page
            client.println(F("HTTP/1.1 204 Zoomkat"));
            client.println();
            client.println(); 
          }
          else {   
            client.println(F("HTTP/1.1 200 OK")); //send new page on browser request
            client.println(F("Content-Type: text/html"));
            client.println();

client.println(F(""));
            client.println(F(""));
            client.println(F("Arduino GET test page"));
            client.println(F(""));
            client.println(F(""));

client.println(F("

Zoomkat's simple Arduino 1.0 button

"));

// DIY buttons
            client.println(F("Pin5"));
            client.println(F("ON"));
            client.println(F("OFF

"));

client.println(F("Pin6"));
            client.println(F("ON"));
            client.println(F("OFF

"));

client.println(F("Pin7"));
            client.println(F("ON"));
            client.println(F("OFF

"));

client.println(F("Pin8"));
            client.println(F("ON"));
            client.println(F("OFF

"));

client.println(F("Pins"));
            client.println(F(" ALL ON"));
            client.println(F(" ALL OFF

"));

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

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

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

client.println(F(""));

client.println(F(""));
            client.println(F(""));
          }

delay(1);
          //stopping client
          client.stop();

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

//clearing string for next read
          readString="";

}
      }
    }
  }
}

//////////////////////////
void sendGET() //client function to send and receive GET data from external server.
{
  if (client.connect(serverName, 80)) {
    Serial.println("connected");
    client.println("GET /~shb/arduino.txt HTTP/1.0");
    client.println();
  }
  else {
    Serial.println("connection failed");
    Serial.println();
  }

while(client.connected() && !client.available()) delay(1); //waits for data
  while (client.connected() || client.available()) { //connected or data available
    char c = client.read();
    Serial.print(c);
  }

Serial.println();
  Serial.println("disconnecting.");
  Serial.println("==================");
  Serial.println();
  client.stop();

}

for me,the Eternet Shield im using not is missing the sticker with Mac address on it, What's worse,im living on Campus so i dont have my router but use the internet provided by Uni. In this situation, can i just use the Mac address and IP address .etc. given in your Sketch? or is there any way that i can figure out my own Mac address and IP address?

The MAC address must be unique on the network. You can try the address in zoomkat's code. It is likely to be unique.

The IP address is NOT. You must have a unique IP address in the range defined by your school. They are likely to be using DHCP to assign addresses to devices that connect to the network. The Arduino supports using DHCP to get an address.

for me,the Eternet Shield im using not is missing the sticker with Mac address on it, What's worse,im living on Campus so i dont have my router but use the internet provided by Uni. In this situation, can i just use the Mac address and IP address .etc. given in your Sketch? or is there any way that i can figure out my own Mac address and IP address?

Go to walmart and get a netgear 614 router for $25 so you can do your testing with/without the university network.

thanks all of you from explanation and examples...i think i have got some clues now....time to work harder and understand the codes!

zoomkat:
Go to walmart and get a netgear 614 router for $25 so you can do your testing with/without the university network.

BTW,as i see in the sketch, am i using the server offered by u?is it possible for me to use my Arduino as the server as well?

is it possible for me to use my Arduino as the server as well?

Are you asking permission? Sure, I'll let you.

The Arduino can be a server and a client at the same time. What zoomkat's code is illustrating is how. Most of the code is concerned with being a server.

Note, the web server and such will only work on the local network segment at your University. Even there it may not work, depending on the policies of your university. For example, the university may block connection attempts to local machines on port 80 (the standard http port). There are various things you need to do before you can open a web server available everywhere on the internet, which are covered elsewhere in books on how to setup web servers.

Typically, you would need to pay to a web provider to allow you put code up on a shared server (or pay more to have your own dedicated server), pay for a domain name if you have an exclusive name (such as www.my-little-arduino.examples.com). In such a situation, you have the web server handle the general interaction, including some way of notifying the arduino (for example, using a twitter feed or recording the information, and having the arduino poll the web server every so often).

Hi,
The other way to get around the router/firewall hassles is to use only HTTP PUT and GET. If a browser works for web servers you can get in and out that way.

Look at http://cosm.com for examples. Another possibility is https://www.thingspeak.com (example: my_house - ThingSpeak IoT)