Connection de Arduino avec base de donnée MySQL
NOM : PRÉNOM : | CLASSE : | ||
Condition : | • | Travail en binôme; durée 4 heures | |
Matériel : | • | un ordinateur sous Ubuntu avec LAMP installé | |
• | un Arduino Uno, un shield ethernet, un capteur de température TMP36 | ||
Documents : | • | le sujet du TP | |
• | le cours sur les bases de données | ||
L'objectif du TP est de découvrir l'utilisation d'une base de données.
1. | Installation de phpMyAdmin |
Pour créer nos bases de données nous utiliserons phpMyAdmin, un des outils les plus connus permettant de manipuler une base de données MySQL.
? Installez phpMyadmin en tapant sous la console la commande :
sudo apt-get install phpmyadmin
? Avec la barre espace, cochez la case Apache 2 comme serveur web à reconfigurer. ? Répondez OUI à la question « faut-il configurer la base de données de phpmyadmin ? » ? Entrez le mot de passe sti2dsin.
? Entrez à nouveau le mot de passe sti2dsin (2 fois) pour la connexion à phpmyadmin.
? Démarrez Firefox et allez à l'url localhost/phpmyadmin/. Connectez-vous à la base de données en utilisant le compte utilisateur root, mot de passe sti2dsin. L'écran suivant apparaît :
2. | Construire une table dans la base de données |
Vous allez créer une base de données sti2d, composée d'une table maTable constituée de 5 champs, afin d'y enregistrer les données du formulaire vu dans le TP précédent.
id | nom | prenom | sexe | an_naissance |
? Cliquez sur l'onglet Bases de données puis créez une nouvelle base sti2d :
? Dans la partie gauche de l'écran, sélectionnez maintenant cette nouvelle base sti2d. Puis créez une nouvelle table maTable composée de 5 champs (5 colonnes) :
? Créez alors les 5 champs comme ci-dessous puis cliquez sur en bas de la fenêtre sur Sauvegarder.
Voilà, la table maTable est prête. Il est possible d'écrire, lire ou modifier des données à partir de requêtes écrites en langage SQL.
? Cliquez sur l'onglet SQL puis sur INSERT et tapez la ligne ci-dessous. Cliquez alors sur l'onglet Afficher et vérifiez que vous venez bien d'insérer une première entrée dans la table.
INSERT INTO `maTable`(`id`, `nom`, `prenom`, `sexe`, àn_naissance`) VALUES (1,"Dupond","pierre","M",1994)
Nous allons, dans le chapitre suivant, voir qu'il est possible d'écrire dans la table à partir d'un programme en PHP.
3. | Écrire dans une base de données en PHP |
Vous allez réutiliser le formulaire du TP PHP. On vous donne cidessous le fichier .
? Enregistrez ce fichier dans le dossier /var/www de votre poste.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Mon super site</title> </head> <body> <form action="" method="post"> Nom: <input type="text" name="nom" size="20"/><br/> Prénom : <input type="text" name="prenom" size="20"/><br/> Sexe : <input type="radio" name="sexe" value="M" /> Masculin <input type="radio" name="sexe" value="F" /> Féminin <br/> Année de naissance : <select name="annee"> <option value="1992">1992</option> <option value="1993">1993</option> <option value="1994">1994</option> <option value="1995">1995</option> <option value="1996">1996</option> <option value="1997">1997</option> <option value="1998">1998</option> <option value="1999">1999</option> </select> <br/> <input type="submit" value="Envoyer"/><br/> </form> </body> </html> |
Le formulaire appelle un fichier dont le code est donné ci-dessous. Un autre fichier contient les identifiants de connexion à la base de données, ce qui garantit une meilleure sécurité.
? Enregistrez ces deux fichiers dans le dossier /var/www de votre poste.
<?php /* récupération des données du formulaire */ $nom = $_POST['nom']; $prenom = $_POST['prenom']; $sexe = $_POST['sexe']; $an_naissance = $_POST['annee']; include (''); /* connexion à la bdd */ $link = mysqli_connect($host,$user,$pass,$bdd); if (!$link) die('Echec de connexion au serveur de base de données : ' . mysqli_connect_error() . '(' . mysqli_connect_errno() . ') '); echo 'base connectée <br\>'; /* envoi d'une requête pour un encodage en UTF-8 */ $query= "SET NAMES UTF8"; |
mysqli_query($link,$query); /* envoi d'une requête pour mettre à jour la bdd */ $query = "INSERT INTO maTable (nom,prenom,sexe,an_naissance) VALUES ('$nom','$prenom','$sexe','$an_naissance')"; mysqli_query($link,$query); /* déconnexion de la bdd */ mysqli_close($link); ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Mon super site</title> </head> <body> <p>Pour revenir à la page formulaire, <a href="">cliquez ici</a></p> </body> </html> |
<?php /* identifiants de connexion */ $host = "localhost"; $user = "root"; $pass = "sti2dsin"; $bdd = "sti2d"; ?> |
? Ouvrez le formulaire dans Firefox en tapant l'adresse 127.0.0.1. Remplissez le formulaire puis cliquez sur Envoyer. Allez ensuite voir dans votre base de données à l'aide de phpMyadmin que les valeurs entrées ont bien été ajoutées à la table maTable de la bdd sti2d.
? Quel est le rôle de la ligne $nom = $_POST['nom'] ; ?
? Quelle ligne permet de se connecter à la bdd ?
? Quel est le rôle de la requête "INSERT INTO maTable (nom,prenom,sexe,an_naissance) VALUES ('$nom', '$prenom', '$sexe', '$an_naissance')" ?
4. | Lire des éléments d'une base de données en PHP |
Vous allez maintenant lire et afficher le contenu de la table dans une page web. On vous donne ci-dessous le fichier .
? Enregistrez ce fichier dans le dossier /var/www de votre poste. Ouvrez ce fichier dans Firefox et vérifiez son bon fonctionnement.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>lecture de la bdd</title> </head> <body> <?php include (''); /* connexion à la bdd */ $link = mysqli_connect($host,$user,$pass,$bdd); if (!$link) die('Echec de connexion au serveur de base de données : ' . mysqli_connect_error() . '(' . mysqli_connect_errno() . ') '); echo 'base connectée <br/>'; /* envoi d'une requête pour un encodage en UTF-8 */ $query= "SET NAMES UTF8"; mysqli_query($link,$query); /* envoi d'une requête pour lire la bdd */ $query = "SELECT * FROM maTable "; // requête SQL if ($reponse = mysqli_query($link, $query)) { $nb = mysqli_num_rows($reponse); /* nombre de lignes du résultat est stocké dans la variable php $ reponse */ echo 'Nombre de personnes dans la base : '.$nb.'<br/>'; if ($nb!=0) { while($ligne = mysqli_fetch_array($reponse)) { /*les valeurs de nom sont lues dans le tableau $ligne['nom'] et stockées dans la variable &nom mais ne sont pas conservées*/ $nom = $ligne['nom']; $prenom = $ligne['prenom']; echo $nom.' - '.$prenom.' - '.'<br />'; } } mysqli_free_result($reponse); // libération des résultats } mysqli_close($link); ?> </body> </html> |
? Quel est le rôle de la ligne $query = "SELECT * FROM maTable "; ?
? Quel est le rôle de la ligne while($ligne = mysqli_fetch_array($reponse)) ?
? Modifiez le programme afin d'afficher à l'écran tous les champs de la table maTable. Testez et faîtes valider le bon fonctionnement par le professeur.
Validation prof :
5. | Arduino et base de données |
L'objectif de ce chapitre est d'effectuer des mesures de température, à l'aide d'un Arduino et d'un capteur de température TMP36, toutes les 20 secondes, et d'enregistrer les mesures dans une base de données.
Pour ce faire, vous devez :
– connecter un shield ethernet sur un Arduino UNO ;
– câbler un capteur de température TMP36 sur la broche A0 de l'Arduino ;
– modifier le programme Arduino donné ci-dessous et programmer l'Arduino ;
– créer une table temp dans la base sti2d de votre poste avec 4 champs : id, date, heure, temperature ; – écrire un programme qui reçoit les données de l'Arduino et les enregistre dans la table temp de la base de données sti2d. Ce programme récupère aussi la date et l'heure du PC afin de les envoyer avec chaque valeur de température ;
– écrire une page web qui se connecte à cette base et affiche les mesures.
void setup() { // start the serial library: Serial.begin(9600); pinMode(A0,INPUT); // give the ethernet module time to boot up: delay(1000); // start the Ethernet connection using a fixed IP address and DNS server: Ethernet.begin(mac, ip); // print the Ethernet board/shield's IP address: Serial.print("My IP address: "); Serial.println(Ethernet.localIP()); } void loop() { httpRequest(); delay(20000); } // this method makes a HTTP connection to the server: void httpRequest() { float temp=analogRead(A0); if (client.connect(server, 80)) { Serial.println("Connecting "); Serial.print("la temperature est de : "); Serial.println(temp); // send the HTTP PUT request: client.print("GET ?temp=+"); /*localhost à changer par l'@ IP du serveur */ client.print(temp); client.println(" HTTP/1.0") ; client.println(); Serial.println("fin de la requete "); (); } else { // if you couldn't make a connection: Serial.println("connection failed"); (); } } |
? Utilisez les travaux effectués dans ce TP pour écrire les différents programmes. Testez et faîtes valider le bon fonctionnement par le professeur.
Validation prof :
6. | Présenter les données en PHP et Javascript |
L'objectif est de présenter les données récoltées dans la base de données sous une forme synthétique et graphique interprétable par tous navigateurs . On distingue trois zones d'information :
- la température instantanée (thermomètre) ,
- l'historique de l'évolution de la température (graphique)
- un calcul de la moyenne et des extrêmes des températures récoltées.
6.1 Calculs sur la base de données
Pour afficher les valeurs moyenne et extrêmes, trois requêtes vers la base de données doivent être formulées à partir d'un fichier PHP, puis elles seront affichées.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>lecture de la bdd</title> </head> <body> <?php include (''); /* connexion à la bdd */ $link = mysqli_connect($host,$user,$pass,$bdd); if (mysqli_connect_errno()) { echo "Failed to connect to MySQL: " . mysqli_connect_error(); } if (!$link) die('Echec de connexion au serveur de base de données : ' . mysqli_connect_error() . '(' . mysqli_connect_errno() . ') '); echo 'base connectée <br/>'; //envoi d'une requête pour un encodage en UTF-8 */ |
$query= "SET NAMES UTF8";
mysqli_query($link,$query); modifier par le nom de
votre table
/* envoi d'une requête pour lire la bdd */
$query = "SELECT * FROM `maTable` "; // requête SQL vers maTable if ($reponse = mysqli_query($link, $query)) {
$nb = mysqli_num_rows($reponse); // nombre de lignes du
résultat echo 'Nombre de mesures dans la base : '.$nb.'<br/>'; if ($nb!=0)
{
while($ligne = mysqli_fetch_array($reponse))
{ vérifier les noms de ces
$date = $ligne['date']; champs dans votre
$heure = $ligne['heure'];
$temp= $ligne['temp']; table
//la derniere valeur lue sera affichée sur le thermo // echo $date.' - '.$heure.' - '.$temp.'°C - '.'<br />';
}
}
mysqli_free_result($reponse); // libération des résultats
} champ à vérifier modifier par le nom de
//Récupération moy max et min votre table
$query = "SELECT AVG(`temp`) AS temp_moy FROM `maTable`";
if ($reponse = mysqli_query($link, $query)) {
$ligne = mysqli_fetch_array($reponse); $temp_moy = $ligne['temp_moy'];
echo 'la température moyenne est de '.$temp_moy.'°C<br />';
champ à vérifier mysqli_free_result($reponse); // libération des résultats
}
$query = "SELECT MAX(`temp`) AS max_temp FROM `maTable`"; if ($reponse = mysqli_query($link, $query)) {
$ligne = mysqli_fetch_array($reponse); modifier par le nom de
$temp_max = $ligne['max_temp']; votre table
echo 'la température maxi est de '.$temp_max.'°C<br />'; mysqli_free_result($reponse); // libération des résultats
}
?>
</body>
</html>
? Identifier la requête mysql nécessaire pour obtenir la valeur moyenne :
? Indiquer dans quelle variable PHP est stockée cette donnée :
? Identifier la requête mysql nécessaire pour obtenir la valeur max :
? Indiquer dans quelle variable PHP est stockée cette donnée :
? Recopier et modifier ce code en utilisant la base de données connectée avec l'Arduino. Enregistrer-le sous dans var/www.Tester.
? La requête mysql nécessaire pour obtenir la valeur min est la suivante: SELECT MIN(`temp`) AS min_temp FROM `maTable`. Tester cette requête dans la base de donnée en l'adaptant au nom de votre base de donnée. Vérifier le résultat.
Validation prof : |
? Écrire dans votre fichier , le code permettant de récupérer et d'afficher la valeur min. Vous stockerez cette valeur dans la variable PHP $temp_min.
6.2 Communiquer des données de la base de données au Javascript par le PHP
JavaScript est un langage de programmation de scripts principalement employé dans les pages web interactives mais aussi pour les serveurs.
Du code JavaScript peut être intégré directement au sein des pages web, pour y être exécuté sur le poste client. C'est alors le navigateur Web qui prend en charge l'exécution de ces programmes appelés scripts.
Généralement, JavaScript sert à contrôler les données saisies dans des formulaires HTML, ou à interagir avec le document HTML via l'interface Document Object Model, fournie par le navigateur (on parle alors parfois de HTML dynamique ou DHTML). Il est aussi utilisé pour réaliser des services dynamiques, parfois futiles, strictement cosmétiques ou à des fins ergonomiques.
? Télécharger sur le réseau la bibliothèque RGRAPH contenant entre autre la représentation du thermomètre.
? Créer un dossier libraries dans var/www. Décompresser dans ce dossier uniquement les trois fichiers cidessous, contenant la représentation graphique et les effets dynamiques du thermomètre (remplissage et affichage des valeurs).
: noyau mathématiques de la bibliothèque
: effets dynamiques utilisés
: aspect graphique du thermomètre
Note : Le répertoire demos de la bibliothèque RGraph permet de visualiser l'ensemble des jauges graphes, diagrammes, Gantt et voyants disponibles Rgraph/default pour une vision d'ensemble
On donne ci-dessous le programme partiel que vous fusionnerez avec le programme précédent :
<!DOCTYPE html> <html> <head> <META HTTP-EQUIV="Refresh" CONTENT="30; "> <link rel="stylesheet" href="" type="text/css" media="screen" /> <meta charset="utf-8" /> <title>lecture de la température</title> <script src="" ></script> <script src="" ></script> <script src="" ></script> <script src="" ></script> <script src=""></script> </head> Code permettant d'affecter un positionnement sur la page en lien avec le fichier css et de définir la taille de la fenêtre du thermomètre <body> <h1> SUIVI DE TEMPERATURE </h1> <canvas id="cvs" width="100" height="400">[No canvas support]</canvas> <script> début du code javascript //thermomètre $(document).ready(func = function () { /*finalisation du themomètre passage des paramètres variables*/ var value ='<?php echo $temp ; ?>'; if (typeof thermometer == 'undefined') { // A global on purpose thermometer = new RGraph.Thermometer({id: 'cvs', min: 0, max: 100, value: value}); } else { thermometer.value = value; } () setTimeout(function(){RGraph.clear(thermometer.canvas);func();}, 5000); }) </script> </body> </html> |
? Identifier, dans le code javascript, où est réalisé le lien entre la dernière valeur de température lue dans la base de donnée par le code php. Quelle variable php est transformée en variable js ?Sous quelle nom estelle stockée désormais dans le script js ?
? A quoi va servir cette variable PHP pour l'obtention du thermomètre ?Identifiez où cette nouvelle variable js est utilisée.
? Copier le code ci-dessus dans votre fichier index php. Attention, veillez à insérez la partie « body » à la suite du « body » existant dans le fichier précédent.
? Code contenu dans le fichier que vous créerez dans var/www.
body { font-family: Arial;} #cvs { margin-right:10%; float: right; width:10%; } h1{ text-align : center;} |
Validation prof : |
? L'échelle actuelle du thermomètre couvre la plage de 0 à 100, modifiez votre programme pour qu'elle aille désormais de 0 à la température maxi +10 ($temp_maxi +10) que vous avez récupérez dans votre code php.
6.3 Créer un graphe représentant l'historique des données de la bdd
? Rajouter à votre répertoire librairies le fichier (aspect graphique du thermomètre). ? Ajouter à la partie php de votre fichier le code ci-dessous :
? Complétez ce code permettant de récupérer dans un tableau php les valeurs des températures, vous utiliserez la variable $tempinst[].
? Identifier le nom de la nouvelle chaîne de caractères contenant les valeurs de températures :
? Insérer dans le body du code html de votre fichier le code ci-dessous : il s'agit d'une superposition de 3 graphes comprenant une ligne bleu indiquant la température maxi, une rouge pour l'historique des température et une verte pour la température mini.
? Écrire le code permettant d'obtenir la ligne verte de la température mini (vous utiliserez les mêmes options de tracé de la ligne de ce graphe que celles utilisées pour la ligne bleu hormis la couleur) . ? Attention id cvs2 doit être paramétré dans votre fichier . Complétez le fichiez
#cvs2 { width:70%; float: left; } h1 { text-align : center; } h4 { text-align : center; } #text { float: left; width:80%; } | ||
Validation prof | : | |
? Ce code peut être rajouté en fin de body du fichier expliquez ce qu'il fait :
<span id="text" style="font-size: 12pt; font-weight: normal">
<h4><?php echo 'La température mini est de '.$temp_min.'<br />'; echo 'La température moyenne est de '.$temp_moy.'<br />'; echo 'La température maxi est de '.$temp_max.'<br />'; ?></h4> </span>