Template HTML sur arduino

Oulah, mettons un peu d'ordre dans tout ça, histoire de donner les grandes lignes qui peuvent ensuite être approfondies grâce aux tonnes d'informations disponibles sur le net.

Là tout de suite, sur cette page que vous êtes en train d'afficher dans votre navigateur favori, faites donc un clic droit puis "afficher le code source"

Vous voyez alors le code de la page html, tel que le site arduino l'a envoyé à votre PC.
Ce code est juste du texte.
Le format général est du xml.
La norme html ajoute en plus une dénomination précise de certaines balises.

Et en regardant le code un peu plus en détail, vous verrez qu'il contient aussi des liens URL vers des ressources externes, que le navigateur va aussi aller chercher (sauf s'il les a déjà dans son cache local).
Il y a des images, mais aussi des feuilles de style .css et des sources en javascript .js
D'ailleurs vous pouvez cliquer sur chaque lien pour afficher son contenu.

Toutes ces ressources sont des fichiers que votre navigateur récupère auprès d'un serveur, par une requête http.

Ce serveur peut très bien être un arduino, avec les fichiers stockés sur sa carte SD.
Et il les envoie à la demande.

Et un template de site, c'est juste un ensemble de fichiers ressources déjà codés, que l'on adapte ensuite pour y ajouter son propre contenu.

D'ailleurs pour la mise au point, le plus simple est de stocker ces fichiers en local sur son disque dur, pour les modifier avec un éditeur de texte et visualiser le résultat directement dans le navigateur.

Problème : tous ces fichiers ont un contenu statique.
En général il y a toujours des parties variables dans une page html.

Si l'arduino est le serveur de page html, les possibilités de faire varier le contenu sont assez limitées. On peut par exemple retourner une page dans laquelle on insère à la volée la température mesurée par une sonde.

Les possibilités s'ouvrent considérablement quand on passe sur un serveur plus abouti.
Le cas classique et facile d'accès (et libre de droits) est de monter un serveur LAMP sur un un raspberry pi.
LAMP = Linux + Apache + Mysql + PHP

PHP est un langage de programmation proche du c++, qui va être exécuté sur le serveur à chaque demande provenant d'un client web, et qui permet de générer le html qui sera retourné au client.

MySQL est un système de base de données.

Avec par exemple comme résultat final :

Un serveur LAMP avec une base de données dans laquelle sont stockés les relevés de température, et deux types d'accès client :

  • un accès depuis l'arduino qui, en tant que client du serveur, va lui transmettre régulièrement les relevés de température (le relevé est passé en complément d'url, récupéré par le code PHP qui le stocke en base et retourne une page html vide).
  • un accès standard qui retourne une belle page avec une courbe de température construite à partir de la base de données

Pour arriver à ce résultat, le programme d'auto-apprentissage est :

  1. XML & HTML
  2. CSS (CSS3 et HTML5)
  3. Javascript (avec un petit tour par ajax)
  4. Linux & Raspberry
  5. Apache (limité à comment configurer un serveur web)
  6. PHP
  7. Mysql

Bonne route :slight_smile: