Build Webserver with Arduino Leonardo and WiFi Shield

I have belkin wireless router running on my room, with tight strict security inside. Haha, I set the mac address filtering and use PSA Personal for the encryption type.


Usually I didnt open the SSID broadcast on that router, but for the sake of arduino wifi shield. I opened the one, with wireless mode 802.11b/g/n enabled. Please remember the shield doesn’t support for the 802.11n wireless mode.


In this belkin router doesn’t support for PSA Enterprise encryption type at all, but at least it has the PSA2 with personal version, and the shield support for the one, so its ok for now.


I use the leonardo board, it was very cheap compare the uno one. Even the wifi shield like triple times expensive than the board, haha. Ok, now the hardware is prepared, lets open the laptop and go to the code :

[gist /]

Just like the arduino ethernet shield, the wifi version need include the spi library to talk with the arduino board. All the global variables preset including with wireless ssid name , and password. Also as a common webserver we will build, the board need to open listener with tcp port 80, so the web client can connect easly.

[gist /]

Because the shield talks with arduino thru SPI connector, it has benefit for us to debug the board while its running thru serial usb connector. Inside the setup function, we open the board with baud rate 9600 to talk with laptop, in this example i used the CoolTerm for the one.


The wifi shield and the board use the pin 7 for the handshake, I don’t like for this one, I can’t use the pin 7 for other purpose like if i wanna to apply LCD shield instead. But the good thing, inside the code we can use function WiFi.status() to check is the shield is properly plug into board or not.

Well, I’m quite amazed with the shield, it’s very easy to perform the wireless connection to the router, even though use anykind of encryption modes, all u have to do just type WiFi.begin( ssid , password ) in the setup function, very neat. After you find the established connection, you can debug the code to display to see the current local ip that the shield got.


We can do the test. First we need to check inside the wireless router that if any of the new device connected to the one, Second we need the ip of the device in this case the wifi shield it self, and Last one we can try to do ping to validate the connection from the laptop to the shield.

After the shield connected to the wireless router, we can build our tiny webserver by typing server.begin() inside the setup function, cool. This just the same code like we did inside the ethernet shield.

[gist /]

I just re-type the code from the arduino web server example. Basically the way of the code work is when there is a new client connected to the shield address thru the web client like typing address , the shield wil recognized as a new client. The board need to validate the connection and fetch all request data until finish. After all the request data is loaded, it will process by displaying back into the terminal thru usb connector. Please remember to perform client disconnection from the webserver by typing client.stop() statement in the last statements of loop function.


Here the display example inside the console terminal after found new client connected thru the mozilla firefox browser like below


FIN :-)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s