Ethernet Shield + Sensors and Display On a Webpage

Hello,
I have a problem since 2months...
I search how i can show values of my sensors on a dynamic webpage and i don't have find the solution.
Can you help me please? It's a project for my school.
I have Arduino ethernet shield for the webserver,sensor DHT22 for temperature and humidity (http://www.gotronic.fr/art-capteur-d-humidite-et-de-t-grove-sen51035p-18964.htm) , other sensor for temperature is (http://www.gotronic.fr/art-capteur-de-temperature-grove-sen23292p-18965.htm) and a simple display LCD 2x16.
The only who i arrived is to modify the exemple in the library and i have add my website but i don't arrived to send the values on my website i don't think how can i and i don't have find exemples who built on the web.
Sorry for my bad english i'm french :S
Thank you for yours response
my code

/*
http://www.bajdi.com   
Web  Server showing the values from a DHT22 sensor
*/
#include <SPI.h>
#include <Ethernet.h>
#include <dht.h>

#define DHTTYPE DHT22// Sensor type
#define DHT22_PIN 4// Data pin of DHT22 sensor
// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac[] = { 0x90, 0xA2, 0xDA, 0x0F, 0x21, 0xE8 };
byte ip[] = { 172,16,7, 100 };
// Initialize the Ethernet server library
// with the IP address and port you want to use
// (port 80 is default for HTTP):
EthernetServer server(80);
void setup(){
  // start the Ethernet connection and the server:
  Ethernet.begin(mac, ip);
  server.begin();
}
  void loop()
  {

  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {
    // an http request ends with a blank line
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        // if you've gotten to the end of the line (received a newline 
        // character) and the line is blank, the http request has ended,
        // so you can send a reply  
      if (c == '\n' && currentLineIsBlank) {
        // send a standard http response header
        client.println("HTTP/1.1 200 OK");  
        client.println("Content-Type: text/html");     
          client.print("<h1>Arduino powered webserver</h1>");  
      client.println("
");       
    client.print("Serving temperature and humidity values from a DHT22 sensor");
    client.println("
");        
    client.print("Temperature (oC): ");  
    client.println("
");       
    client.print("Humidity (%): ");  
    client.println("
");
        client.print("Bonjour");  
    client.println();
    
    client.println("<!DOCTYPE HTML>");
    client.println("<html>");
    client.println("<HEAD> <META charset=""UTF-8""></HEAD>");
    client.print("<body style=background-color:#B0C4DE>");
    client.println("<font color='red'><P style=""font-family:Courier New""><h1 ALIGN=CENTER>La Mini Serre</font></h1></P>");
    
    client.println("<table CELLPADDING=2 CELLSPACING=1 BGCOLOR='#3CB371'><tr><td>");  
          client.println("");
          client.println("<style>");
          client.println("body { width:900px; margin:auto; }.nav {list-style: none none;margin: 0;padding: 0;line-height: 1;}.nav a {display: block;padding:.5em;color: blue;background: #B0C4DE;text-decoration: none;}.nav a:focus,.nav a:hover {color: black;background: #3CB371;text-decoration: underline;}.nav-item {float: left; position: relative; }.sub-nav {position: absolute; white-space: nowrap; left: 0; top: 2em; white-space: nowrap; background: #B0C4DE; margin-top: -2px; }.sub-nav-item a {position: absolute;left: -10000px;top: auto;width: 1px;height: 1px;overflow: hidden;float: left; }.sub-nav-item a:focus,.nav-item a:focus +.sub-nav a,.nav-item:hover .sub-nav-item a {position: static;left: auto;width: auto;height: auto;overflow: visible;}@media screen and (max-width: 480px) {.nav-item {float: none; }.sub-nav {position: static; white-space: normal }.sub-nav-item a {display: block; width: auto; height: auto; position: static; padding-left: 1em; overflow: visible; float: none;}}");
          client.println("table{Background-Color: #3CB371;border-collapse: collapse; }th, td{border:  2px solid black;}.cantine{font-size: 23px}.cantine{font-weight: bold;}.jours{font-size: 23px}.jours{font-style: italic;}body {Background-Color: #B0C4DE;}");
          client.println("</style>");
          client.println("");
          client.println("<center>");
          client.println("<thead><tr><th></th><th class=jours> Température </th><th class=jours>Humidité </th></tr></thead>");
          client.println("<tbody><tr><td class=cantine>A l'intérieur</td>");
          client.println("<td width=300 height=200>");
          client.println("Température intérieur
");
	  client.println("</td>");
	  client.println("<td width=300 height=200> Humidité intérieur
</td></tr>");
          client.println("<tr><td class=cantine> A l'extérieur </td><td width=300 height=200>Température extérieur
</td>");
          client.println("<td width=300 height=200>Non disponible
</td><body text=#000000></tr>");
          client.println("</tbody>");
          client.println("</table>");
          client.println("</center>");

          
    client.println("</BODY>");
    client.println("</html>");
     client.println("<meta http-equiv=\"refresh\" content=\"30\">");
    
    break;
    }   
    if (c == '\n') { 
      // you're starting a new line   
      currentLineIsBlank = true;  
      }  
      else if (c != '\r') {
        // you've gotten a character on the current line
        currentLineIsBlank = false; 
        }    
      }   
    }   
  // give the web browser time to receive the data
  delay(1);
  // close the connection:
  client.stop();
  }
}

Bye

Server code that displays the current values of the arduino analog input pins in a web page.

// zoomkat's meta refresh data frame test page 5/25/13
// use http://192.168.1.102:84 in your brouser for main page
// http://192.168.1.102:84/data static data page
// http://192.168.1.102:84/datastart meta refresh data page
// for use with W5100 based ethernet shields
// set the refresh rate to 0 for fastest update
// use STOP for single data updates

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

const int analogInPin0 = A0;
const int analogInPin1 = A1;
const int analogInPin2 = A2;
const int analogInPin3 = A3;
const int analogInPin4 = A4;
const int analogInPin5 = A5;

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; //physical mac address
byte ip[] = { 192, 168, 1, 102 }; // arduino 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
unsigned long int x=0; //set refresh counter to 0
String readString; 

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

void setup(){
  Serial.begin(9600);
    // disable SD SPI if memory card in the uSD slot
  pinMode(4,OUTPUT);
  digitalWrite(4,HIGH);

  Ethernet.begin(mac, ip, gateway, gateway, subnet);
  server.begin();
  Serial.println("meta refresh data frame test 5/25/13"); // so I can keep track of what is loaded
}

void loop(){
  EthernetClient client = server.available();
  if (client) {
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
         if (readString.length() < 100) {
          readString += c; 
         } 
        //check if HTTP request has ended
        if (c == '\n') {

          //check get atring received
          Serial.println(readString);

          //output HTML data header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println();

          //generate data page
          if(readString.indexOf("data") >0) {  //checks for "data" page
            x=x+1; //page upload counter
            client.print("<HTML><HEAD>");
            //meta-refresh page every 1 seconds if "datastart" page
            if(readString.indexOf("datastart") >0) client.print("<meta http-equiv='refresh' content='1'>"); 
            //meta-refresh 0 for fast data
            if(readString.indexOf("datafast") >0) client.print("<meta http-equiv='refresh' content='0'>"); 
            client.print("<title>Zoomkat's meta-refresh test</title></head><BODY>
");
            client.print("page refresh number: ");
            client.print(x); //current refresh count
            client.print("

");
            
              //output the value of each analog input pin
            client.print("analog input0 is: ");
            client.print(analogRead(analogInPin0));
            
            client.print("
analog input1 is: ");
            client.print(analogRead(analogInPin1));
                        
            client.print("
analog input2 is: ");
            client.print(analogRead(analogInPin2));
            
            client.print("
analog input3 is: ");
            client.print(analogRead(analogInPin3));
                                    
            client.print("
analog input4 is: ");
            client.print(analogRead(analogInPin4));
            
            client.print("
analog input5 is: ");
            client.print(analogRead(analogInPin5));
            client.println("
</BODY></HTML>");
           }
          //generate main page with iframe
          else
          {
            client.print("<HTML><HEAD><TITLE>Zoomkat's frame refresh test</TITLE></HEAD>");
            client.print("Zoomkat's Arduino frame meta refresh test 5/25/13");
            client.print("

Arduino analog input data frame:
");
            client.print("&nbsp;&nbsp;<a href='http://192.168.1.102:84/datastart' target='DataBox' title=''yy''>META-REFRESH</a>");
            client.print("&nbsp;&nbsp;&nbsp;&nbsp;<a href='http://192.168.1.102:84/data' target='DataBox' title=''xx''>SINGLE-STOP</a>");
            client.print("&nbsp;&nbsp;&nbsp;&nbsp;<a href='http://192.168.1.102:84/datafast' target='DataBox' title=''zz''>FAST-DATA</a>
");
            client.print("<iframe src='http://192.168.1.102:84/data' width='350' height='250' name='DataBox'>");
            client.print("</iframe>
</HTML>");
          }
          delay(1);
          //stopping client
          client.stop();
          //clearing string for next read
          readString="";
        }
      }
    }
  }
}

Maybe one way is to serve up some HTTP responses to a client's PC containing HTML/JavaScript. In essence making their browsers load scripts that can send POST requests using JavaScript's "xmlhttprequest" web interface API (and the setInterval() method as a continuous loop). If requests could be generated in a loop and had the destination path set to your Arduino's IP address, you could append post header parameter data at the end of the path ( something like 'http://my.arduinos.ip.address/?data_only=True' ). And as long as the server running on the Arduino was RESTful then you could send a request from the JavaScript in the browser and the Arduino could look at the post header data. There it could check to see if some parameter name was ever sent and render dynamic content as the response. Or just send some data back. The Arduino could also read the value(s) coming from the header data and do something with it to render a response as well. At the end of the day your browser would receive back some kind of response data that could then be used to modify the document object model (DOM) of the page loaded in the browser and basically insert or modify the existing data that was previously loaded on the page. Then the request/response cycle loops and the process begins all over again. Ultimately resulting in data that is periodically changing on the webpage (without having to refresh the entire page and is using less bandwidth/processor overhead, more fluid looking, etc..).

As an example lets say a web browser issued a POST requests to the Arduino's IP (or more specifically: JavaScript just called "XMLHttpRequest().send()" ) with the parameter "?data_only=True" present in the header.

The Arduino web server could check if the parameter "data_only" was present in the request, then it takes sensor measurements and bundles all of the values up into a response string.
Depending on your preference you could respond with a raw data format (proprietary to the application), or you could us a data-interchange format like JSON or XML.

I prefer JSON.
http://www.w3schools.com/json/

After the response from your Arduino has been sent back to your PC, the JavaScript from the HTML file you loaded earlier (that's now running in your browser) will receive it and can then read the data.
This data can be used in may ways. But in your case i believer all you want to see is some of the browser's DOM objects (like a Div section) display the values, so:

JSON is pretty simple:
looks like this:
{ "name":"sensor1", "type":"flux power", "value":1.21, "unit":"jigawatts" }

but you can also embed JSON within JSON, so to speak...
So lets say this is some JSON that your Arduino returns to your browser:

{
"sensor_array":
    [
       { "name":"altitude" ,    "type":"altimeter" ,  "value":304,        "unit":"km" },
       { "name":"speed" ,       "type":"xnav/inu",    "value":28000,      "unit":"km/h" },
       { "name":"coord" ,       "type":"gps",         "value":"82.7° N 114.4° W" }
   ]
}

And the Javascript in the HTML file could have something similar to this:

<html>
<body>
<div id="MyDiv">  --The data between these tags will be replaced by JavaScript--  </div>

<script>
        // Javascript function JSON.parse to parse JSON data
        var jsonObj = JSON.parse(http_request.responseText);

        // jsonObj variable now contains the data structure and can
        // be accessed as jsonObj.sensor_array.
        // now lets put that data in a Div
        document.getElementById("MyDiv").innerHTML =  jsonObj.sensor_array;
</script>

</body>
</html>

basically that's AJAX..
aka. asynchronous javascript and xml.
http://www.w3schools.com/ajax/default.ASP

Though I have never done any of that on an Arduino per se, so please don't ask me for specifics, This was only my best guess on one way someone might go about displaying real-time ("updating") data on a webpage (in this case without refreshing the page).

Now this part may or may not be of help to you but I have built sensor networks for automation and manufacturing industries in the past using Atmel stuff and some Arduinos.

The way I do it is by using a web framework and a centralized server / database.

If you know any scripting languages (like Python 2.x or PHP) then mod WSGI and Apache might be a good way a beginner could start a Web Application Framework. This allows the Arduino's only having to communicate raw sensor data to the server and not have to serve up client requests for full blown HTML (and possibly AJAX) request/response cycles, which is not only faster on the Arduino's behalf, But development of the web framework is at a centralized point, also centralized database access and it uses the Linux LAMP configuration which is very well known, secure and widely supported.

Good luck friend(s)!!