Arduino – Webserver with an Arduino + Ethernet Shield

838 Flares 838 Flares ×

This project is all about using an Arduino with an Ethernet shield. I’ll be controlling one LED and a servo, but you can apply this method to control any electronic device you want. (such as DC motors, buzzers, relays, stepper motors, etc..)

And I’ll be using a brand new arduino board that my friend at BJTechNews Sent me!
Check his youtube channel here for some awesome advices about computers and smartphones.

Introduction:

The code provided when uploaded and connected to the internet it creates a webserver in your LAN and you simply use the IP to access that webserver through your browser. After that it shows a webpage similar to that one below. When you press the button “Turn On LED” your url will change to: “http://192.168.1.178/?button1on” the arduino will read that information and It turns the LED On.

By default the IP is “192.168.1.178″. That also can be found on the arduino code provided.

Check this Video tutorial below ! (Includes demonstration)

Parts Required:

1x Arduino Uno
1x Ethernet Shield
1x 220 Ohm Resistor
1x LED
1x Micro Servo Motor
1x Breadboard
Jumper Cables

Schematics:

Upload this Arduino Code Below:

Note:

If you try this project. You can only access that IP address from your home. This means you must be connected to the same router that you’re ethernet shield is connected to. That picture below is from me accessing my webserver with my iPad.

Thanks for reading, you can contact me by leaving a comment. If you like this post probably you might like my next ones, so please support me by subscribing my blog and my Facebook Page.

P.S. Don’t forget there’s a new video every other Thursday!

alain frenois
Reply November 8, 2013

great achievement and very useful for achieving a home automation with relay perifairique comander of the 220 v or 110 v
- Rui
  Reply November 9, 2013
  
  Thanks for your feedback!
  yes that’s exactly what I want to show.
  you can use this code to apply to your own projects for home automation
Er Ajinkya Dixit
Reply November 9, 2013

Wow…. really awesome project dude. You can use HTML also to create attractive and powerful web application i.e. webpage. I will give you link about that.
This is the link here : http://internetofthings-pune.blogspot.in/2013/07/this-is-open-source-home-automation.html
- Rui
  Reply November 11, 2013
  
  Hi!!
  Thanks for the feedback Er Ajinkya Dixit!
  Yes we can customize the CSS file and the HTML to create a better webpage. But I’m not very experienced in that programming languages yet. So I’ve just made a basic webpage with my knowledge
  Thanks for the resource!
  My next webpage will be more customized.
- Rui
  Reply November 11, 2013
  
  Hi!!
  Thanks for the feedback Er Ajinkya Dixit!
  Yes we can customize the CSS file and the HTML to create a better webpage. But I’m not very experienced in that programming languages yet. So I’ve just made a basic webpage with my knowledge
  Thanks for the resource!
  My next webpage will be more customized.
Con
Reply November 17, 2013

Hi do you have the source code for webpage?
- Rui Santos
  Reply November 17, 2013
  
  Hi,
  yes Con. You can download the source code for the webpage here:
  http://randomnerdtutorials.com/download
  Or simply click the like or tweet button and the download link will unlock.
  
  the best way is by entering your email and you’ll have access to a secret page where you can
  download all my projects every time I release a new one.
  
  thanks for stopping by,
  Rui Santos
  - Con
    Reply November 17, 2013
    
    hmm I pressed like but only got the source code for the arduino not the browser
    - Con
      Reply November 17, 2013
      
      ignore my previous comments, thanks for the code
Khaled
Reply January 8, 2014

would u please send me the android webpage source code
- Rui Santos
  Reply January 8, 2014
  
  what you mean by the android webpage?
  That webpage can be accessed through your tablet/smartphone browser…
  and all the code used can be download on this page if you click like.
  Thanks for leaving a comment,
  Rui
Decka
Reply January 14, 2014

what a nice project rui, but it’s the first time i saw arduino ethernet shield, can you make a tutorial about how to configure ip address or something like that on ethernet shield, or how to configure that on router using dhpc?
- Rui Santos
  Reply January 15, 2014
  
  Thanks Decka.
  Right now I’m working on a different project related to the Ethernet shield.
  So stay tuned, because that project will be released soon…
  I might do what you’re looking for later though.
  All the best,
  Rui
  - Decka
    Reply January 17, 2014
    
    okay, good luck on your project bro.
    keep it up…
  - Decka
    Reply January 17, 2014
    
    btw it’s dhcp not dhpc, sorry for typo…
    - Rui Santos
      Reply January 18, 2014
      
      Yeah I know, I got it!
      Unfortunelety I don’t have time right now to do that. as i said… maybe later
      
      Have a nice day,
      Rui
nataraj
Reply January 18, 2014

hi sir,

Thank you very much for your reply and i need some more details like i want to get the sensor value through html . .and.i want to know what is going on home through sensor..suppose if any human is enter into the home .it has to inform to web page through HTML using PIR sensor…. so this kind of application i need…i hope you will understand very well,..please do the needful to complete my project as soon as possible…..
- Rui Santos
  Reply January 22, 2014
  
  Hi Nataraj,
  sorry for taking a few days to answer..
  I’ve been really busy.
  What you’re looking for is an Arduino data webserver…
  http://g33k.blogspot.pt/2010/09/arduino-data-webserver-sample-web.html
  You can combine that project with mine if you want to customize the look of the hmtl page!
Jaap
Reply February 2, 2014

Hi,
Really great projects here! I learned a lot.
A question:
I see when clicking the buttons on the page they work oke for a while bit after some time the site seems to hang. Sometimes texts messed up and nothing works anymore. Do you recognize this? Is there a solution?
I see it happens running IE on my PC but also running Chrome browser and Safari on my iPad.
- Rui Santos
  Reply February 2, 2014
  
  Thanks jaap.
  I’m glad you’re enjoying my projects!
  
  That never happened to me.
  It might be a problem with your network/ethernet shield.
  In another project I’ve made recently I noticed that sometimes if the ethernet shield is connected for too long, It gets disconnected and no longer works until you reset manually the arduino.
  
  With this webserver project I’ve tested to run for 17hours, 8 hours, 32hours and It worked just fine.
  Now what I recommend you to do,
  is to comment the project with Serial.print() commands and see where the problem is coming from and how long it takes until it stops…
  
  Just one more question which ethernet shield are you using?
  (the one with the Wiznet 5100 chip?)
  - Jaap
    Reply February 2, 2014
    
    Hello Rul,
    Thanks for your help!
    Yes, it’s a shield with the Wiznet 5100 chip. I ordered it from BangGood. Worked fine in other projects.
    You wrote: “17hours, 8 hours, 32hours…” but have you also done some testing by using all buttons one after another multiple times? Let’s say 10 time.
    - Jaap
      Reply February 3, 2014
      
      Hello Rui,
      I think the problem is fixed.
      Changed the delay time from 1 to 100 in this part of the sketch:
      
      client.println(“”);
      delay(100);
      
      And now my page keeps running…
      - Rui Santos
        February 5, 2014
        
        I’m glad to hear that !
        Thanks for trying my project Jaap.
        
        Have a nice day,
        Rui
seva
Reply February 23, 2014

I cann’t open the link
- Rui Santos
  Reply February 25, 2014
  
  Which link Seva?
  - seva
    Reply March 9, 2014
    
    if you can help me control the lights via the web, control light intensity,
    - Rui Santos
      Reply March 12, 2014
      
      Search on the web for a PWM project to control the lights intensity.
      Then change my code for this project.
      so instead of controlling an led to turn on/off you’re going to increase or decrease the light.
      
      Thanks for asking,
      Rui
Constantinos Lambrou
Reply March 12, 2014

I notice the code references a CSS file. Is it possible to have the code be stand alone? Meaning one would not have to host a CSS file?
- Rui Santos
  Reply March 12, 2014
  
  yes, you can customize the html without the CSS file.
  The CSS just makes it easy to customize the html without repeating the same styling options again and again.
  
  Thanks for asking,
  Rui
Murp
Reply April 16, 2014

Hi Rui, I’m trying to adapt your code to control 8 LEDs through internet but I have one problem…With 4 leds, works ok,but if I configure a 5th led, don´t work…..

Can I send you the code to some email to see if you see any faults?? (Ide recognizes the code without errors..)

Thanks and regards
- Rui Santos
  Reply April 18, 2014
  
  Hi Murp,
  I don’t have the time to debug your code I’m sorry…
  I don’t know how experienced you are with Electronics, so just a few questions
  are you defining the right LED’s pins properly as inputs? are your LED’s in the right way?
  - Murp
    Reply April 18, 2014
    
    Hi Rui, no problem
    
    To your questions, no and yes..Leds are configured as “int” –> outputs and all is connected ok (It works ok with 4 but not with 5..With 5, the buttons are on screen but don´t work if I press any…)
    
    The code, I think that works right (No error on IDE, less than 20000 bytes), but I don´t understand what´s the matter…
    
    With 4, I configured twice:
    
    Pins 2,3,4 and 5
    Pins 6,7,8 and 9
    
    And all works ok (Arduino,leds,proto connetions,code…), and for that, I discarded all parts of the system like bad or broken components..
    
    Thanks for all..
    
    Regards
    (About my experience with electronics, let’s say my level is medium jeje)
    - Rui Santos
      Reply April 25, 2014
      
      That might be a problem with your html then…
      You’re probably doing some sort of mistake that makes an error on the html page (in your ip/webserver page)
      and breaks the pages so any button works…
      
      That’s my guess..
      - Murp
        April 25, 2014
        
        Hi
        
        I only add the neccesary code, any more line, any less line, and because I don´t understand what is the problem…
        
        Thanks anyway..
        
        Regards
Dimitris
Reply May 2, 2014

first of all i would like to say thanks for sharing all those super cool projects.

i was wondering if it is possible to access the web page this arduino serves throught internet when you are not in home if you open a port at your router and set it to forward the packages to arduino (im talking about a simple port forward)
would that work in order to access arduinos web page and controll a device in home from thousand kilometers away through internet?
- Rui Santos
  Reply May 3, 2014
  
  Hi Dimitris,
  You’re 100% right this project could work exactly as you described.
  There’s just one problem, anyone with your ip can control your home.
  (And that’s really easy to find if someone leaves near you…)
  
  The best way to do that is to encrypt that data and also create some sort of authentication but that requires a more powerful device such as a Raspberry Pi for example.
  I’ve made a project that allows you to control your home from anywhere in the world with an arduino and an ethernet shield.
  please take a look:
  http://homeautomationserver.com/
dany
Reply May 21, 2014

Hei, it’s awesome project dude. I have a question for you.
After I read this project, can I assume that the LED and servo was controlled over IP? or it’s something different?
- Rui Santos
  Reply May 26, 2014
  
  You’re right dany.
  With this method you can only control the LED and servo if you’re connected to the same router.
  Then you open the browser with the arduino webserver ip
  - dany
    Reply July 12, 2014
    
    Thanks for your response, so just like what I thought. I’m a bit curious, can it works on a linux router? Do you think it can work?
Frankarduino
Reply June 8, 2014

Hi, this is amazing project. But I got a problem when i try to access the webserver through my browser. I typed the address: 192.168.1.178 on my browswer, it shown a blank page. Is it because of my router? Thanks
- Rui Santos
  Reply June 24, 2014
  
  I’m not sure, It should be working just fine… there’s might be an incompatibility with your router.
Hallow
Reply June 12, 2014

Hello Rui,
How i can add more pages to this
say Home Page : Control two relays
First Floor : Control two relays and sensors
Like that

Pls Help
Hallow
Reply June 12, 2014

Hello Rui,

How i can add more pages to this project
Say Home Page : Control Two relays
First Floor : Control relays and sensors
Master Bed Room : etc…..
Pls Help

Regards
- Rui Santos
  Reply June 24, 2014
  
  Hi Hallow,
  Simply insert those buttons on my arduino code,
  take a look at my code and see how i add the other buttons.
Dimitris
Reply June 17, 2014

Hello Rui you said earlier that arduino is not powerfull enough for encryption and so anyone might be able to controll your house using this web server.
i thought about it and i modified your code in order to create a simple pin-password that is needed in order to activate the relays.

it is done by declaring a new variable that needs to get a certain value in order to let the relays activate.

in order to give values to this variable i added 12 new buttons for 0-9, * and #
what i am doing is simple or advanced mathematic operations in order to give a specific value in the variable by pressing the correct pin on the buttons i added.
this is the link of the sketch i made.
it may be usefull to someone.
https://www.dropbox.com/s/1w1nolo7i6ufb0p/web_server_modified_pc_control.ino
relays password: 4321
so in this sketch i set the correct variable value to be number 9
when you arrive at the web site the pin variable value is 0 and the relays wont work
so in order to activate the relays you will have to press the button 4 in order to add 4 to the pin variable
followed by 3 in order to multiply the current pin value (4)*3
followed by 2 in order to substruct 2 from the current pin value
and finally 1 in order to substruct 1 from the current pin value
after this the final pin variable value is 9 and now you can activate the relays.

so in conclusion you can select what mathematic operation does every single button, you can use as many digits as you want for the pin (4-5-8-10 buttons) and you can also select the value of every single button, which means you can do pretty much anything with the password.

now another interesting thing i done, is that i set every single button that is not used in the password to reset the pin value.
so if someone just tries to put random passwords he will keep reseting the pin value and wont be able to activate the relays.
you can also use this function if you mistakenly pressed twice a button which will mean that the pin value will be wrong and you will have to reset the pin value in order to re enter the password.
just press any of the unused buttons and the pin is reseted.
you can add big passwords like 8 12 digits and so on to make brute force attacks difficult or you can add buttons with letters too.

i added some pin value reports over serial connection for debugging and also i added 2 outputs in order to connect 2 leds with a resistor on each one of them.
one led is off when the pin value is not yet correct and lights up only when the pin value is correct (password correct)
the second one is kept off when the pin value is lower than the correct one
and is turned on if the pin value is over the correct one.
those 2 leds is just for visual indication of pin-password status (for debuggind purposes again. if you dont want it just delete the line with the comments)

finally the last modification i made is that i removed the servo buttons
and i made the other 2 buttons to activate and deactivate after 1 second in order to controll my computer’s power and reset buttons.

thats it, the project finally is heavilly modifies in order to match my needs but i thought i should post it here because someone may want to use simple password protected relays in this web server project.
i hope you and everyone else likes it.
- Rui Santos
  Reply June 25, 2014
  
  Hi Dimitris,
  Thank you so much for sharing your work!
  It’s a really clever idea what you did there.
  The data is still not encrypted by SSH for example, so if someone performs a man in the middle attack they can get the raw data and can use to access your webserver. (If you have your router ports open)
  
  Again, thanks for sharing!
  I might do a tutorial/project with your idea in mind.
  Have a nice day,
  Rui Santos