Basic Arduino Web Server Using Ethernet Shield W5100
Basic Arduino Web Server Using Ethernet Shield W5100
Many beginners wonder how Arduino can act as a web server. The answer is simple: with an Ethernet Shield W5100 stacked on Arduino and a LAN cable connected to your Router, Arduino can serve web pages to any browser on your local network.
How Arduino Web Server Works
Once the Ethernet Shield is connected and the LAN cable is plugged into your Router, the Router assigns an IP address automatically via DHCP. This IP may change every time you reset the device. After you know the assigned IP, just type it into your browser’s URL bar and you’ll see the web page created by Arduino immediately.
Required Hardware
- Arduino Uno or compatible board
- Ethernet Shield W5100
- LAN cable
- Router with available LAN port
This shield communicates with Arduino via the SPI bus using pins 10, 11, 12, 13
Step 1: Check the IP Address Assigned by Router
Before building the web page, we need to know what IP the Router gave to Arduino. The easiest way is to use Serial Monitor to display the IP address.
#include <SPI.h>
#include <Ethernet.h>
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
void setup() {
Serial.begin(9600);
// Start Ethernet using DHCP, wait for IP from Router
if (Ethernet.begin(mac) == 0) {
Serial.println("Failed to configure Ethernet using DHCP");
while (true);
}
delay(1000);
// Print the received IP in Serial Monitor
Serial.print("Arduino IP: ");
Serial.println(Ethernet.localIP());
}
void loop() {
}Open Serial Monitor (Ctrl+Shift+M) at 9600 baud. You’ll see the IP assigned to Arduino, such as 192.168.1.177. Write this IP down as you’ll need it in the next step.
Step 2: Write Web Server Code to Display Analog Values
Now let’s create a web page that reads Analog values from pins A0-A5 and displays them in the browser. The key commands are client.print() and client.println() which send HTML code to the browser for interpretation.
#include <SPI.h>
#include <Ethernet.h>
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
// Create Web Server on port 80
EthernetServer server(80);
void setup() {
Serial.begin(9600);
// Start Ethernet with DHCP
Ethernet.begin(mac);
server.begin();
Serial.print("Server IP: ");
Serial.println(Ethernet.localIP());
}
void loop() {
// Listen for incoming clients
EthernetClient client = server.available();
if (client) {
Serial.println("New client connected");
boolean currentLineIsBlank = true;
while (client.connected()) {
if (client.available()) {
char c = client.read();
Serial.write(c);
// If received blank line, HTTP request is complete
if (c == '\n' && currentLineIsBlank) {
// Send HTTP Response Header
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println("Refresh: 5"); // Refresh page every 5 seconds
client.println();
// Send HTML code
client.println("<!DOCTYPE HTML>");
client.println("<html><head><title>Arduino Web Server</title></head><body>");
client.println("<h1>Arduino Analog Readings</h1>");
client.println("<p>Last update: ");
// Read Analog values from all 6 channels
for (int channel = 0; channel < 6; channel++) {
int value = analogRead(channel);
client.print("Analog A");
client.print(channel);
client.print(" = ");
client.print(value);
client.println("<br>");
}
client.println("</p></body></html>");
break;
}
if (c == '\n') {
currentLineIsBlank = true;
} else if (c != '\r') {
currentLineIsBlank = false;
}
}
}
delay(1);
client.stop();
Serial.println("Client disconnected");
}
}Testing the Web Server
- Upload the code to Arduino
- Open Serial Monitor to see the assigned IP
- Open a browser and type the IP in the URL bar, e.g.
http://192.168.1.177 - You’ll see a web page displaying Analog values from all 6 channels, refreshing automatically every 5 seconds
Additional Things to Know
MAC Address Configuration - Every device on a network must have a unique MAC address. If you use multiple Arduino boards, change the value in byte mac[] such as { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED } to a different unique address.
Port 80 - This is the standard port for HTTP. When you type an IP in the browser without specifying a port, the browser automatically connects to port 80.
Auto Refresh - The line client.println("Refresh: 5"); tells the browser to reload the page every 5 seconds, allowing you to see updated values continuously when sensors are connected.
Reference Video
Summary
Building a Web Server with Arduino and Ethernet Shield W5100 is a great foundation for real-world applications like reading temperature sensor values and viewing them from your phone anywhere on the same network, or creating a web control panel to switch devices on and off. The limitation is that you must be within LAN range, but to control from a remote location you would need additional Port Forwarding or a Cloud Service configuration.
อยากทำโปรเจคแบบนี้?
รับทำโปรเจค Arduino / IoT จบงานไว ส่งงานครบ พร้อมสอน
If you need Arduino project service or urgent IoT development, see full service details on the home page
จ้างทำโปรเจคเลย