Arduino + Ethernet - Webserver - HTML forms - EEPROM

Arduino with Ethernet is suitable for various network applications based on web technologies - HTTP (does not support HTTPS), or various industrial services based on: Modbus, MQTT, UDP, TCP protocols. Ethernet shield Wiznet W5100 can be used on all R3 Arduino boards, so it is fully compatible for Arduino Uno, Mega 1280/2560.
Ethernet shield or module can be operated in two basic modes:

  • WebClient - A client on the network that is able to connect to a remote server - send and receive data from the server

  • Webserver - server that is able to receive data from clients (process them), respond to client queries

Today we will show you how to use a simple web server on the Arduino + Ethernet platform (W5100 / W5500). The Webserver allows you to run multiple HTML subpages that can be opened by clients and get HTML output. This output is suitable for static text listing applications without server-side dynamics.

An example of a webserver (simple, static) can be found at: https://www.arduino.cc/en/Tutorial/WebServer
However, there is a problem with advanced implementation, such as a form that can be used to enter values ​​and store them permanently on the webserver. Data processing is particularly problematic because Arduino cannot run a PHP backend language. Storing data on the webserver for permanent storage is the use of EEPROM memory.

The EEPROM memory for the Arduino UNO is 512B. EEPROM is limited to 10 to 100 thousand transcripts, while being energy independent. The data is stored on the web server and in the event of a power failure. A solution for all these factors can be found in my implementation. Form data is processed by a second HTML file that allows you to download form arguments, including name, for each form field.

Arguments are processed internally by Arduino (not related to HTML page), data from arguments are stored in EEPROM memory and the user is then redirected from the HTML processing page (with a list of accepted arguments) to the HTML page preceding the form. tag with relative home page location.

This example was originally developed for 12 shift registers 74HC595, which controlled 3 displays - the program contains only a part of writing and reading from EEPROM memory. Each of the 74HC595 shift registers controlled eight LEDs - representing the number 0-8. Each display contained a listing of 4 numbers, a total of 4x 74HC595 shift registers per display. Each shift register controls one digit of the entered number, which is always 4 digits.

To maintain a 4-digit number, a text entry form is used to enter numbers (for a numeric input form type, the character limit in the field cannot be applied, and 0002 would also be converted to 2). It is possible to add simple CSS graphics to HTML pages, but you can also assign external CSS types of Bootstrap and other via link tags in the header of HTML documents to beautify the page's visuals. My implementation does not use any CSS files, styles, classes.

Ethernet shield has many settings that can be used in terms of connectivity.
Version 4 IP address can be statically defined, and other important network locations can also be assigned such as:

  • gateway

  • subnet

  • dns server

  • dns server 2

Original form with data from EEPROM memory:

After submitting new data via the form (write to EEPROM and then redirect it back):

Redirect to original HTML form page (new values in EEPROM memory):

More interesting source code projects can be found at: https://arduino.php5.sk?lang=en, various program implementations (not only) for Arduino are available on Github: martinius96 (Martin Chlebovec) · GitHub
Program for webserver is available at: https://github.com/martinius96/snippets/blob/master/ovladanie_LED_W5100_Webserver.ino or at: martinius96@gmail.com