Arduino and the web: Part 1

This will be the first in a series of posts that will explore the possibilities of interfacing an arduino to the web. I hope that each post can build on itself and offer increasingly more advanced and powerful solutions to arduino projects.


This post will focus on how to set up a  PHP enabled web server on your computer. A web server is a first step in creating a user interface that allows communication between an arduino, other devices, and the internet.


I need to:
1) Set up a server on my computer that is able to interprate PHP.
2) Access the server from a LAN.
3) Pass commands to the arduino using  HTML, JavaScript, and PHP

Though there are a number of  ways to go about setting up a server. I found the easiest, most streamlined way, is to use WampServer on a windows machine.

One note of warning: While installing Wamp I got an error saying that  the program can't start because "MSVCR110.dll" is missing. After Googling the error I found that it has to do with a Visual C++ interpreter that windows requires. The download fixed the problem.

 If everything went smoothly, you should see a green icon in the tray on the lower right. Hovering over it will say that WAMP is online. If that is the case, opening up a browser and putting in the words "localhost" should take you to the WAMP administrator page seen below. 

 
 I was also able to access the server from other computers and mobile devices on the same network by typing the local ip of the computer running server (which could be found by searching and opening Command Prompt, and putting the words "ipconfig" in. This would be the IPv6 address.)


Let's tie this back to the Arduino. Using an Arduino Yun connected to my network, I grabbed the example code from chapter 2 of the book "Internet of Things With the Arduino Yun." (I can't find the link to it but I hope to simplify some of the it and put my version of it up. Also, the same author did a very similar tutorial on Adafruit which can be found here.) 

To put the files up on the web server in order to make them accessible over the LAN, you need to access the www folder of WAMP. Which can be done by left clicking "www directory" in the task bar.


You will have to create a sub directory, I called mine LED. Notice. in the image above, in the bottom there is a category called LED. All the files in that folder can be accessed from your browser by typing, "localhost/led" This is shown in the picture below.


 Finally, clicking on the html file should give you interface that pulls together the JavaScript, PHP, and CSS file. (By the way to see or edit the code for any of these files, I use Geany text editor.)

interface.html file with two buttons that triggers the built in LED on pin 13 to go on/off

Clicking the button executed the javascript. The javascipt reads the button state and variables and calls the php file to send the command to the arduino board.