WEB Server based on ENC28j60 + Arduino - it can't be easier

Hello.
How many people hear that you need to create a WEB server - it immediately becomes uncomfortable, they are trying in every possible way to move away from this topic by applying other options for managing and monitoring their devices. But after all, the Internet and the network are already in almost every device. So why is your creation worse?
So if you're interested - go ahead.


The Wolf is not so terrible as it is painted. There are many specialists among us, but also many newbies. It is never late to learn, I myself learn a lot and learn a lot in practice. I hope this article will help beginners or refresh the memory of those who have begun.
It is based on a popular module with an ENC28j60 controller.
')


And also I took the Arduino UNO (you can also Nano or Pro Mini). They all work on the ATmega328.
In this article I will show the basics of creating a WEB server on the most simple libraries.
In this case:
#include "etherShield.h"
#include "ETHER_28J60.h"
They are easy to understand - but there are also less opportunities. For normal monitoring and load management, more than enough.
Let's look at what we need for this.



To begin with, the libraries are being initialized.
Next, I pointed out pins for connecting a module with an ENC28j60 controller. We also need to specify the parameters of our network device. To do this, specify the MAC address - remember, it should not match the MAC address of your network devices. Similarly, the IP Address - must be individual - but be on your subnet.
For example, you have a router (192,168,0,1), your PC (192,168,0,5) then your device may be (192,168,0,100).
For example, you have a router (192,168,4,1), your PC (192,168,4,10) then your device may be (192,168,4,100).
Next you need to specify the port. The default is 80 - because Web browsers by default interrogate him (see the port change test in the video below).
Next ETHER_28J60 ethernet; - point to the name of the object to access (ethernet), below in the program we will refer to this name.
Next We need to initialize the network controller - we use all the settings of addresses and ports.

Well, then I think the most difficult and not interesting is over ...

Further, in the main program loop, we have to set a condition that will check if there is a request at our IP address? .. If there is, then send the lines of our page, and the browser will already give it the look we are used to. Let's see an example:



The highlighted line creates a large test on the page, it is easy to edit and such lines can be added as needed (but everything depends on the amount of Flash memory of the controller).
Ethernet.respond () command; sends all our site lines to the browser from which they made a request for the site (in this case, 192.168.0.100).
But if you notice that the name of this site is not (just an IP address). Do not worry, it is fixable, if you add one line:



Here ... now is better.
Further adding, we will add lines on the page that will help us display information or manage it.
Let's start with the link, when clicked, we will send a request to the controller with a test (which we will need later for processing).



The red arrow is the name of the button, and the blue we point to the text in the request when you click on the link. So, if We click on the “Stop” link, we will send a request to our server: “192.168.0.100/stop” - where “stop” will be the text of the request.
Next, consider the same option only with the button:



Added attributes needed to display the browser button. When you click, on which, the request is already sent with the test "start". I think everything is clear here.
For beauty lovers, you can add options and create an interesting button:



For the next option, we need variables, add them at the beginning of the sketch:



Now let's display a table on our page:



The table attribute is used to designate a table object. Then I highlighted in red (tr) the outer borders of the table and in blue - the inner frames. Note that they are in pairs, and in the center of the pair is your value or variable (for example, ves1 or ves2). You may also notice that the couple creates bold text and regular text. At the end of the table object is completed / table.
I think with the display of objects on the page is enough to create non-complex WEB pages (in more detail and clearly you can see below in the video lessons for beginners).
But how to process the request - for this we modify our condition a bit from the very beginning, while adding a variable for the string. Also create for example two conditions for processing requests: the 1st is an empty request (192.168.0.100); 2nd is the query with the text “start” (192.168.0.100/start)



Depending on the request submitted to the server, the site will be displayed on the browser according to the following lines:



This is how you can make dynamic pages that will change and display various information depending on the parameters of variables or requests from links and buttons.

In more detail and clearly you can see everything, the above mentioned, in the Video tutorials for beginners:







Links to sketches with examples (In the first example, the library):
www.facebook.com/download/1779869258903901/web_urok_01.rar
www.facebook.com/download/351288838383944/web_urok_02.rar
www.facebook.com/download/435653776600017/web_urok_03.rar

I tried to explain the material in accessible words without using complex terms.
I hope this article will help many beginners to create their own web server. For the more advanced there will be videos on other libraries ... more complicated.