truc2geek

2015/03/08

Arduino et shield Ethernet : client web : part 1

Filed under: Arduino, Informatique, MySQL, PHP, Programmation — Étiquettes : , , , , — truc2geek @ 23:32

Dans un précédent article, j’ai montré comment utiliser une carte Arduino Uno et un shield Ethernet en tant que serveur web, pour afficher quelques valeurs dans le navigateur Internet du PC.

Aujourd’hui on change de méthode, et on sort les grands moyens.
On va mettre en place, sur un hébergement web classique, une page web et une base de données MySQL.
L’Arduino + shield Ethernet seront utilisés en tant que client web, pour transmettra à la page web via une requête GET, au fur et à mesure du traitement, les valeurs à enregistrer dans la Base de Données (BD).

Résultat : on pourra consulter depuis n’importe où sur la planète, les valeurs loggées, et on n’est plus limité à un nombre déterminé de valeurs.

un schéma fait maison :
Scan_01b.png

côté hébergement web

Il nous faut:

  • une Base de Données, je vais utiliser MySQL parce qu’on le trouve partout
  • un langage par lequel la page web pourra agir sur la BD : disons PHP, pour la même raison

définir et créer la BD

Créer un nouvelle BD et créer un utilisateur.

Une table sera suffisante, elle contiendra les champs suivants :

  • idLog : l’identifiant unique (clé primaire) de chaque donnée loggée
  • idTest : l’identifiant d’un test (tous les logs créés pendant un test donné auront le même idTest)
  • instant : la date et l’heure de création du log
  • fonction : la fonction depuis laquelle on crée le log
  • code : le « code » de la valeur loggée
  • valeur : la valeur loggée

On peut créer la table via l’interface graphique de phpMyAdmin ; mais je préfère écrire le fichier d’instructions SQL,
que j’exécuterai depuis phpMyAdmin :
01.png

Dans phpMyAdmin, pour exécuter un fichier d’instuctions SQL, aller sur l’onglet « Importer ».

Si l’importation est réussie, on a l’écran suivant :
02.png

le fonctionnement

Comment faire pour enregistrer des données dans cette table?
Comment afficher les données sur une page web?

On va créer une seule page, en PHP, qui effectuera ces deux tâches.
Pour enregistrer des données, on appellera cette page en lui transmettant la valeur pour chaque champ en argument.
Pour afficher les données, on appellera cette page sans lui transmettre aucun argument.

le script de connexion à la BD

En plus de la page web, on va créer un fichier « .php » contenant uniquement la fonction de connexion à la BD.
Ce fichier ne sera pas accessible par les visiteurs du site, pour des raisons de sécurité.
31.png

 La page web, 1e version

Pour l’instant, c’est juste une page web presque vide, sans code php, mais je la nomme déjà « index.php » :
05.png

Pour l’instant on place seulement ce fichier « index.php » sur l’espace web, et on entre l’url dans Firefox :
06.png

insérer des données via phpMyAdmin

08.png

25.png

Création d’un deuxième enregistrement :
26.png

27.png

On a bien les deux enregistrements :
12.png

la page web, 2e version

La page va maintenant se connecter à la BD et afficher les enregistrements.

28.png
14.png

Ligne 11, on inclut le script de connexion, on indique le chemin relatif.
La chaîne « ../ » permet de remonter d’un niveau dans l’arborescence.

Résultat dans Firefox :
15.png

Ca fonctionne, mais on ajoute quand même une bordure :
29.png

17.png

Ca fait plus 1990 que 2014 mais bon, c’est seulement des infos pour du debug…

la page web, 3e version

On va ajouter la fonctionnalité permettant de traiter les paramètres reçus : c’est le code suivant, lignes 1 à 20 :
30.png

Pour tester, on entre l’url dans la barre d’adresse de Firefox, avec les paramètres après « index.php » :
/index.php?idLog=3&idTest=1&fonction=loop&code=chaineRecue&valeur=test;e

résultat :
23.png

A suivre

La Base de Données MySQL et la page PHP sont opérationnelles ; le code côté Arduino fera l’objet d’un prochain article.

Publicités

Laisser un commentaire »

Aucun commentaire pour l’instant.

RSS feed for comments on this post. TrackBack URI

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

Propulsé par WordPress.com.

%d blogueurs aiment cette page :