Building a graphical interface to control the relays

Although it's good to use commands directly inside your browser to test the project, it's not so convenient to actually use the project for daily use. That's why we are going to build a dedicated interface so that you can control your relays from your computer, just by clicking on some buttons.

Since we'll use web technologies to do so, this interface will also be accessible from your mobile phone or tablet, as long as you are connected to the same Wi-Fi network.

Just as seen in the first chapter of this book, we are going to use a mix of HTML, CSS, JavaScript, and PHP to build the interface. Let's first see the important part of the HTML file. It is basically composed of several blocks, each corresponding to a relay. For each relay, there are two buttons: one to set the relay on and one to set it off. The following is the code which is responsible for that part:

<div class="relayBlock"><span class...