Simple tutorial for programmers


This page shows how to implement web server form processing when retrieving "GET" HTML form data on an Arduino based web server.

This code is incorporated into a program which demonstrated the Arduino getting time from a network time server, and processing a web form to start the demo. The following code is compiled with Arduino 1.0 on a Arduino Uno (I am using version R2) together with an Arduino Ethernet Shield

The starting point is the code which will enable a web server and provide a single page

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

byte mac[] = {
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };   //physical mac address
byte ip[] = {
  192, 168, 2, 201 };   // static ip of Arduino
byte gateway[] = {
  192, 168, 2, 254 };  // gateway address
byte subnet[] = {
  255, 255, 255, 0 };  //subnet mask
EthernetServer server(80);   //web server port

void setup(){
  //enable serial monitor
  Serial.begin(9600);
  //start Ethernet
  Ethernet.begin(mac, ip, gateway, subnet);
}

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

        // start of web page
         client.println("HTTP/1.1 200 OK");
         client.println("Content-Type: text/html");
         client.println("<html><head></head><body>");
         client.println();
         client.print("<form method=get>");
         client.print("<input type='radio' name=r value='1'> One<br>");
         client.print("<input type='radio' name=r value='2' checked> Two<br>");
         client.print("<input type='radio' name=r value='3'> Three<br>");
         client.print("<input type=submit value=submit></form>");
         client.print("</body></html>");
         //stopping client
         client.stop();
       }
     }
   }
}



The above code will server the web form with radio buttons. With the addition of the highlighted lines below the program will receive back in string form the action from the GET form so as to enable the programmer to utilize the web form input

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

#define MaxHeaderLength 16    //maximum length of http header required


byte mac[] = {
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };   //physical mac address
byte ip[] = {
  192, 168, 2, 201 };   // static ip of Arduino
byte gateway[] = {
  192, 168, 2, 254 };  // gateway address
byte subnet[] = {
  255, 255, 255, 0 };  //subnet mask
EthernetServer server(80);   //web server port

String HttpHeader = String(MaxHeaderLength);


void setup(){
  //enable serial monitor
  Serial.begin(9600);
  //start Ethernet
  Ethernet.begin(mac, ip, gateway, subnet);

   //initialize variable
  HttpHeader="";

}

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

         char c = client.read();
         //read MaxHeaderLength number of characters in the HTTP header
         //discard the rest until \n
         if (HttpHeader.length() < MaxHeaderLength)
         {
           //store characters to string
           HttpHeader = HttpHeader + c;
         }
         //if HTTP request has ended
         if (c == '\n') {
           // show the string on the monitor
           Serial.println(HttpHeader);

          // start of web page
           client.println("HTTP/1.1 200 OK");
           client.println("Content-Type: text/html");
           client.println("<html><head></head><body>");
           client.println();
           client.print("<form method=get>");
           client.print("<input type='radio' name=r value='1'> One<br>");
           client.print("<input type='radio' name=r value='2' checked> Two<br>");
           client.print("<input type='radio' name=r value='3'> Three<br>");
            client.print("<input type=submit value=submit></form>");
           client.print("</body></html>");

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

           //stopping client
            client.stop();
         }
       }
     }

   }

}




Still to come, additional code to turn a LED on and off.

Comments Welcome