AP3.2: les bases de données (MySQL) et PHP

STI2D
Option SIN
Première
AP3.2: les bases de données (MySQL)
et PHP
Informatique
Durée prévue : 4h.
Problématique : rendre accessible, par le biais d'internet, des données issues d'un capteur
Compétences visées
Être capable de mettre en œuvre une base de
donnée avec PHP
Plan de l’étude
Partie 1 : arduino en mode serveur
Partie 2.1 : qu'est-ce qu'une base de données ?
Partie 2.2 : arduino en mode client
Savoirs associés
Remarque
Arduino, ethernet shield et HTML
MySQL + PHP
Arduino, HTML, PHP et MySQL
Logiciels
Notepad++
Mozilla Firefox
Wamp
Wireshark
Matériels
Ordinateur
Mode de distribution
Format numérique
les balises HTML5.pdf
les propriétés CSS3.pdf
caracteres_speciaux_HTML.pdf
Dossier technique associé
Dossier ressource associé
Site internet ressource
concevez-votre-site-web-avec-php-et-mysql.pdf
http://openclassrooms.com
Un compte-rendu est à rendre au professeur (sous forme informatique ou papier). La forme
informatique est à privilégier car elle permet d'intégrer les codes des pages réalisées.
La problématique : comment rendre accessible des
données issues de mesures (par exemple la température
d'une pièce) de partout grâce à internet ?
Nous allons découvrir 2 solutions :
• la première va consister à transformer notre carte arduino
en serveur. Cette carte va faire la mesure du capteur et
lorsque quelqu'un accédera à notre serveur-arduino, celuici va générer la page HTML avec la mesure.
• La deuxième solution, plus réaliste, va consister à écrire
dans une base de données nos mesures issues du capteur.
Ensuite une page PHP va aller lire les mesures présentes
dans la base de données et les afficher sur une page web.
Partie 1 : arduino en mode serveur
Précision: si le arduino est en mode serveur, c'est lui qui va générer le site web (ici en html) suivant le
principe suivant :
Nous allons utiliser le module Ethernet Shield :
Ce module Ethernet Arduino permet à une carte Arduino de se connecter à un réseau ethernet. Il suffit
d'utiliser la librairie Ethernet pour écrire des programmes qui se connectent à internet en utilisant ce module.
Ce module possède aussi un connecteur pour carte SD, qui pourra être utilisé pour stocker des fichiers qui
pourront être envoyés sur le réseau.
Votre shield Ethernet possède un numéro unique (appelé une adresse MAC pour Media Access Control
address). Cette adresse MAC est l'identifiant physique stocké dans un composant de la carte et qui est utilisé
pour attribuer mondialement une adresse unique à chaque élément connecté au réseau.
1. Relevez l'adresse MAC de la carte ethernet Shield :
adresse MAC du shield ethernet
90
AP3.2_eleves.odt
A2
DA
2/16
2. Demandez au professeur de monter les 3
cartes ensemble :
•
•
•
un dangershield
un ethernet shield
un arduino (uno ou mega)
3. Demandez au professeur l'adresse IP
réservée correspondant à votre carte
Ethernet Shield
Soit le programme arduino suivant :
#include <SPI.h> // bibliothèque de la liaison série
#include <Ethernet.h> //Inclure la bibliothèque Ethernet
// Adresse MAC du shield l'adresse IP dépend de votre réseau local
byte mac[] = { 0x90, 0xA2, 0xDA, 0x0F, 0x15, 0x15 };
IPAddress ip(192,168,1,62); // à choisir sur votre réseau local – version adresse IP fixée
int CAPTEUR_TEMP_PIN = 4; // adressage du capteur de temperature (PIN) //
int SLIDER1_PIN = 0;
int SLIDER2_PIN = 1;
int SLIDER3_PIN = 2;
int potentiom1 = 0; //définition de la variable entière (integer) potentiom1//
int potentiom2 = 0; //définition de la variable entière (integer) potentiom2//
int potentiom3 = 0; //définition de la variable entière (integer) potentiom3//
int temp = 0; //définition de la variable entière (integer) //
float temperature = 0; // variable temperature en flottant //
float const_can = 0.0048828; // constante du convertisseur //
EthernetServer server(80);
//Initialise le serveur Ethernet, port 80 par défaut pour HTTP
void setup()
{
Ethernet.begin(mac,ip); //Démarrer la connexion Ethernet et le serveur (version DHCP)
server.begin();
Serial.begin(9600); //Affichage écran du PC
analogRead(CAPTEUR_TEMP_PIN);
analogRead(SLIDER1_PIN);
}
void loop()
{
temp = analogRead(CAPTEUR_TEMP_PIN); // lecture du capteur de température //
temperature = (((temp*const_can)*1000)-500)/10; //calcul//
potentiom1 = analogRead(SLIDER1_PIN); // lecture potentiomètre 1 //
potentiom2 = analogRead(SLIDER2_PIN); // lecture potentiomètre 2 //
potentiom3 = analogRead(SLIDER3_PIN); // lecture potentiomètre 3 //
// Ecouter les clients entrants
EthernetClient client = server.available();
AP3.2_eleves.odt
3/16
if (client) {
Serial.println("new client");
Serial.print("adresse IP: ");
Serial.println(Ethernet.localIP());
// Une requète HTTP terminée par une ligne vide
boolean currentLineIsBlank = true;
while (client.connected()) {
if (client.available()) {
// Envoyer un header de résponse standard http
client.println("HTTP/1.1 200 OK"); //C'est OK
client.println();
client.println("<!DOCTYPE html>");
client.println("<html>");
//---- debut de la page HTML --client.println("<head>");
// ---- Entete de la page HTML ---client.println("<meta content=\"utf-8\">");
client.println("<META HTTP-EQUIV=\"Content-Type\" CONTENT=\"text/html; charset=iso-8859-1\">");
client.println("<META HTTP-EQUIV=\"Content-Language\" CONTENT=\"fr-FX\">");
client.println("<title>Connexion au Serveur Arduino</title>");
client.println("</head>");
client.print("<body style=background-color:black>");
client.println();
client.println("<META HTTP-EQUIV=\"Refresh\" CONTENT=\"1\">");
client.println("<center>"); // pour centrer la page HTML
client.println("<p style=\"color: white\">************************************************* <br> </p>");
client.println("<h2 style=\"color: red\">Bienvenue sur le serveur Arduino!</h2>");
client.println("<p style=\"color: white\">************************************************* <br> </p>");
client.println("<br>"); //saut de ligne
// Sortir la valeur des mesures
client.println("<p style=\"color: white\">");
client.print("Temperature ambiante = ");
client.print(temperature);
client.print(" &degC");
client.println("</p>");
client.println("<p style=\"color: white\">");
client.print("<br/> potentiometre 1 = ");
client.print(potentiom1);
client.println("<br/>"); //saut de ligne
client.print("potentiometre 2 = ");
client.print(potentiom2);
client.println("<br/>"); //saut de ligne
client.print("potentiometre 3 = ");
client.print(potentiom3);
client.println("<br/>"); //saut de ligne
client.println("</p>");
client.println("</center>"); // fin de la zone centrée
client.println("</body>"); // fin du body
client.println("</html>"); //---- fin de la page HTML
break;
}
}
}
delay(1); // Laisser au navigateur web le temps de recevoir les données
client.stop();
// Refermer la connexion:
}
Sur le programme précédent :
4. Entourez, en couleur, les déclarations de variable.
5. Entourez, en couleur, la ligne où rentrer l'adresse MAC
6. Entourez, en couleur, la ligne où rentrer l'adresse IP
7. Surlignez toutes las balises HTML que vous trouvez.
8. Quels sont les 2 instructions Arduino qui permettent d'envoyer un code HTML à votre ordinateur.
AP3.2_eleves.odt
4/16
Donnez leur syntaxe (manière de les utiliser).
9. Copiez le programme précédent dans le logiciel arduino, modifier l'adresse MAC en mettant celle de
votre carte Ethernet Shield et modifier l'adresse IP.
10. Téléversez ce programme dans votre arduino (il doit être relié à l'ordinateur et l'ethernet shield
raccordé au réseau)
11. Dans Mozilla, tapez l'adresse IP de votre carte Ethernet (vous faites alors une demande à arduino qui
va renvoyer la page web). Décrire en détail ce qui se passe.
12. Sur le programme précédent, rajoutez, en couleur, les commentaires manquants.
13. Pour afficher le °C , on a utilisé un code spécial (voir « caracteres_speciaux_HTML.pdf). Quel est ce
code ?
14. Essayez de le remplacer simplement par ° pour voir si ça fonctionne. Conclure.
Partie 2 : base de données gérée par PHP et remplie par le capteur de la carte Arduino
Introduction : transformation de votre ordinateur en serveur local
Le programme qui va transformer votre ordinateur en serveur s'appelle WAMP. Il va installer le serveur
(Apache), la base de données (MySql) et tous les éléments permettant de se comporter comme un serveur.
Vous allez créer un répertoire de travail que vous appellerez « test2_votre nom de famille ». Pour ce faire,
ouvrez l'explorateur Windows et rendez-vous dans le dossier où WAMP a été installé, puis dans le sousdossier intitulé www. Créez votre répertoire « test2_votre nom de famille » (normalement :
c :\wamp\www\ ).
Lancer maintenant le programme WAMP (wampserveur). Si l’icône du
logiciel (dans la barre du bas ou cliquer sur l’icône « afficher les icônes
cachées ») est verte cela signifie que tout fonctionne.
Si ce n'est pas le cas, cliquer (clic de gauche) sur l’icône du logiciel et
lancer les application (« start all » service
ou « démarrer les services »).
Pour vérifier que tout fonctionne, dans la barre d'adresse de Mozilla tapez « http://localhost/ ». La fenêtre de
gestion de notre serveur local doit apparaître ainsi que votre dossier de travail (rubrique « vos projets »).
Partie 2.1 : qu'est-ce qu'une base de données ?
Introduction
La base de données (BDD) est un système qui enregistre des informations de manière ordonnée. C'est une
sorte de grand tableau mémoire où tout est rangé. Les SGBD (Systèmes de Gestion de Bases de Données)
sont les programmes qui se chargent du stockage de vos données. Il y en a plusieurs. Ici nous allons nous
servir de MySQL qui est libre, gratuit et très utilisé.
On va aussi utiliser PHP, qui va faire l'intermédiaire entre nous et MySQL. On devra demander à PHP : « Va
dire à MySQL de faire ceci. » suivant le principe ci dessous :
AP3.2_eleves.odt
5/16
Structure d'une base de données :
Une base de donnée est une sorte d'armoire qui contient différents tiroirs (appelés « tables »). Chaque table
est une sorte de mini base de données :
Exemple : la table « membre » d'un club de foot
Date de
Numéro
nom
prenom
naissance
1
Martin
toto
15-05-1970
2
ecole
Gilbert 2-5-1983
3
Lamache kiki
14-7-2001
…
…
…
Concrètement, quand MySQL enregistre des
informations, il les écrit dans des fichiers ! Ces
fichiers sont quelque part sur votre disque dur, mais il ne faut jamais les ouvrir et encore moins les modifier
directement. Il faut toujours parler avec MySQL qui va se charger d'extraire et de modifier les informations
dans ces fichiers. Pour gérer une base de données, soit on se sert de l'interface phpMyAdmin (en général juste
pour la création), soit de pages web en PHP, tout ça à l'aide de requêtes (une requête est une instruction
compréhensible par MySql comme SELECT, INSERT,…).
1. Création de notre base de donnée et d'une première table
Etape 1 : création de la base de donnée 'test':
Aller dans phpMyAdmin (menu
WampServeur) et cliquer sur « Nouvelle base de données ».
Mettre le nom de votre base de donnée (test) et choisir 'utf8_general_ci' (encodage des caractères) et cliquer
sur « créer ».
AP3.2_eleves.odt
6/16
Etape 2 : création de la table 'club' :
Choisir dans 'phpMyAdmin' la base de donnée 'test' que vous venez de créer (en cliquant dessus). Sur la
partie centrale apparaît alors la fenêtre 'nouvelle table'. Mettre le nom de votre table (club), choisir 4
colonnes et cliquer sur 'Exécuter'. La table est crée. Il reste à la paramétrer ces 4 colonnes (id, nom, prenom
et date_naissance).
Voici le paramétrage à remplir (ne pas mettre d'accents):
Quelques remarques :
• la colonne 'id' , de type INT (nombre entier), est l'index primaire de la table (celui qui dicte en
quelque sorte le classement des éléments de la table). La valeur sera mise automatiquement à chaque
rentrée des données (on dit qu'elle est Auto-implémentée c'est pour cela que la case 'A.I.' est cochée).
• Les colonnes 'nom' et prénom sont de type VARCHAR (texte court : 0 à 255 caractères).
• La colonne 'date_naissance' est de type DATE selon la forme anglo-saxonne : jour, mois, année
Une fois ce paramétrage effectué, cliquez sur 'Sauvegarder'. Çà y est, notre table est créée. Il ne reste plus
qu'à la remplir !
Etape 3 : essayons de la remplir à la main :
Cliquez sur l'onglet « Insérer » et rentrez Hugo Jean né le 4 février 1989 :
et cliquez sur 'Exécuter' pour valider.
AP3.2_eleves.odt
7/16
Vous remarquerez que phpMyAdmin vous bascule automatiquement sur l'onglet « SQL » dans lequel la vraie
requête est écrite (une requête est une ligne de programme effectuant une action sur une base de données)
2. Recopier cette requête
3. Surlignez, de différentes couleurs, sur cette requête, le nom de votre table , le nom de votre base de
données, le nom de l'instruction MySql composant la requête, les paramètres transmis à votre table
dans la base de données et leur valeurs.
Etape 4 : gestion de notre table 'club' avec PHP:
Avec PHP, la structure va être toujours la même :
• connexion à la base de données
• gestion (lecture, écriture, …) de la ou les tables présentes dans la base de données ouverte
Soit la page 'essai_sql_0.php' suivante :
<?php
// connection à la base de données
try
// On essaie de se connecter à MySQL
{
$bdd = new PDO('mysql:host=localhost;dbname=test', 'root', '');
}
catch(Exception $e) // En cas d'erreur, on affiche un message et on arrête tout
{
die('Erreur : '.$e->getMessage());
}
// écriture dans la table
$bdd->exec('INSERT INTO club (id, nom, prenom, date_naissance) VALUES(NULL, \'Martin\', \'Jacques\', \'1975-03-14\')');
echo ('donnee ecrite!');
?>
4. Copiez la page 'essai_sql_0.php' dans 'notepad++' et enregistrez la dans votre répertoire de travail
(test2_votre nom de famille). Lancer cette page (l'URL est localhost/test2_votre nom de
famille/essai_sql_0.php). Allez voir ensuite ce qui s'est passé dans la table 'club' de votre basse de
donnée. Expliquez
5. Entourez, en couleur, sur le code de la page 'essai_sql_0.php' précédente, la partie concernant
l'ouverture de la base de donnée
6. Entourez, en couleur, la partie où l'on insert les nouvelles valeurs dans la table 'club'
Échapper un caractère :
Quand on a besoin d'afficher un caractère spécial (comme >,< , '', /, ', ….) mais que celui-ci a
un sens dans la structure de l'instruction en cours il n'est pas possible de l'utiliser. Il faut donc
le rendre inopérant (inactif), cela s'appelle « échapper un caractère ». Pour cela il faut placer
un slash \ devant le caractère . Par exemple pour rentre inactif > on utilisera \ >
AP3.2_eleves.odt
8/16
Exemple tiré du programme précédent :
$bdd->exec('INSERT INTO club (id, nom, prenom, date_naissance) VALUES(NULL, \'Martin\', \'Jacques\', \'1975-03-14\')');
en langage MySql la requête est normalement:
INSERT INTO club (id, nom, prenom, date_naissance) VALUES(NULL, 'Martin', 'Jacques', '1975-03-14')
7. Surlignez les caractères ' échappés' dans l'exemple PHP précédent ($bdd-> ……….)
8. Expliquez pourquoi ce caractère là a besoin d'être 'échapper' et pas le caractère – présent dans la date.
Etape 5 : manipulation de notre table 'club' avec PHP:
Pour mémoire:
• nom de notre base de données : test
• nom de notre table : club
• noms des colonnes : id, nom, prenom, date_naissance
Objectif : étude de quelques requêtes (SELECT FROM, UPDATE, DELETE FROM) et de leurs options.
Vous allez prendre les 3 fichiers suivants (donnees_post.php, essai_sql_1.php et style.css) sur l'intranet et
vous allez les copier dans votre répertoire de travail (c:/wamp/www/test2_votre nom de famille) .
La structure est la suivante :
La page 'essai_sql_1.ph' est la page principale. Elle contient 2 parties. La première est la possibilité de rentrer
un nouvel élément à votre table 'club' (en validant par 'Envoyer' ou la touche 'entrer' du clavier). Les données
sont envoyées à la page ' donnees_post.php' qui écrit ces données dans la table 'club' et qui renvoie ensuite à
la page 'essai_sql_1.ph'.
La deuxième partie affiche le contenu de la base de donnée. La page 'style.css' est la page de mise en forme.
essai_sql_1.ph :
Nouvelle adhérent
donnees_post.php
Écriture dans la table
'club' de votre base de
données
Affichage du contenu de
la table 'club'
Lancer cette page (l'URL est : localhost/test2_votre nom de famille/essai_sql_1.php)
9. Faire des essais pour comprendre comment tout fonctionne.
10. Recopier la requête qui est envoyée à la basse de donnée par votre page php (instruction 'query') pour
afficher le contenu de votre table 'club'. Essayez d'expliquer ce qu'elle signifie.
Nous allons maintenant travailler sur quelques sélections et manipulations possibles. Pour cela nous allons
avoir besoin d'une table un peu remplie et identique pour tous.
Allez dans l'onglet 'Afficher' de 'phpMyAdmin' (en ayant choisi votre table 'club' bien sûr), cliquez 'Tout
AP3.2_eleves.odt
9/16
cocher' puis 'effacer' et enfin 'oui'. Votre table 'club' doit maintenant être vide.
Allez récupérer le fichier 'club.sql' sur l'intranet. Ensuite, dans 'phpMyAdmin', se mettre sur votre base de
données 'test' puis sur la table 'club'. Cliquer sur l'onglet 'Importer', choisir votre fichier 'club.sql' dans la
rubrique 'Fichier à importer' en cliquant sur 'Parcourir'. Ne rien modifier d'autre et cliquez sur 'Exécuter' pour
finir. Ensuite allez voir dans votre table (onglet 'afficher') pour vérifier que votre table 'club' est remplie.
Nous allons voir les options possibles de SELECT: WHERE, ORDER BY et LIMIT
11. Modifier la page 'essai_sql_1.ph' en mettant comme requête : SELECT * FROM club LIMIT 0,10'.
Relancer la page (actualisation de la page dans le navigateur Mozilla). Décrire ce qui se passe.
12. Modifier la page 'essai_sql_1.ph' en mettant comme requête : 'SELECT * FROM club LIMIT 5,10'.
La relancer . Décrire ce qui se passe.
13. Donnez la requête à écrire pour afficher les éléments de Herelle
à Dubois Aline. Faire l'essai.
14. Modifier la page 'essai_sql_1.ph' en mettant comme requête :
'SELECT * FROM club ORDER BY date_naissance'. Décrire ce qui se passe.
15. Modifier la page 'essai_sql_1.ph' en mettant comme requête : 'SELECT * FROM club ORDER BY
date_naissance DESC'. Décrire ce qui se passe.
16. Faites des essais avec cette option ORDER sur les différentes colonnes avec et sans DESC.
17. Donnez la requête à écrire pour afficher tous les éléments par ordre alphabétique (sur le nom de
famille). Faire l'essai.
18. Modifier la page 'essai_sql_1.ph' en mettant comme requête : SELECT * FROM club WHERE
nom='Martin'. Pensez à 'échapper' les caractères qu'il faut. Décrire ce qui se passe.
Il faut utiliser les mots-clés dans l'ordre suivant : WHERE puis ORDER BY puis LIMIT, sinon
MySQL ne comprendra pas votre requête.
19. Donnez la requête à écrire (avec l'instruction PHP : query( 'votre requête');) pour afficher les
éléments dont le prénom est 'laurent' en les classant par ordre alphabétique du nom de famille. Faire
l'essai : query('……………………………………………………………………………..') ;
20. Donnez la requête à écrire (avec l'instruction PHP : query) pour afficher les éléments dont le prénom
est 'laurent' en les classant du plus vieux au plus jeune. Faire l'essai.
21. Donnez la requête à écrire (avec l'instruction PHP : query) pour afficher les éléments dont le prénom
est 'laurent' en affichant les 2 plus jeunes. Faire l'essai.
Il existe aussi une instruction UPDATE qui permet de mettre à jour une donnée déjà écrite dans la table :
Un exemple : je change la date de naissance de l'élément Dubois Jacques
UPDATE club SET date_naissance= '1996-02-07' WHERE nom = 'Dubois' AND prenom = 'Jacques'
Il existe aussi une instruction DELETE qui permet d'effacer des données déjà écrites dans la table :
Un exemple : j'efface l'élément Dubois Jacques
DELETE FROM club WHERE nom = 'Dubois' AND prenom = 'Jacques'
AP3.2_eleves.odt
10/16
Ceci n'est qu'une petite présentation des possibilités de gestions des bases de données. C'est le
minimum pour comprendre et mettre en œuvre la suite du TP. Vous pouvez bien évidemment
compléter vos connaissances à l'aide du document issu du site 'OpenClassRoom' et disponible sur
l'intranet: concevez-votre-site-web-avec-php-et-mysql.pdf
Partie 2.2 : arduino en mode client
Maintenant le arduino est en mode client : il envoie des demandes au serveur, qui est votre ordinateur ici. Il
va en fait envoyer la température relevée sur son capteur à un programme présent sur le serveur (add.php) .
Ce programme va écrire la valeur dans la base de donnée. Ci-dessous le schéma de principe :
Ensuite nous allons être aussi client et
demander à voir une page générée par
le serveur (index.php) contenant les
données que l'on veut visualiser (ici la
température) suivant le principe :
Au final nous allons avoir 2 pages à
créer, une qui va être appelée par arduino et qui va écrire les données dans la base de donnée (add.php) et une
que nous appellerons nous (index.php) qui va afficher sur notre écran les données).
Etape 1 : création de la table dans la base de données
Aller dans phpMyAdmin (menu
WampServeur) et choisir votre base de donnée « test ».
Créez une nouvelle table « temp » (2 colonnes) ….. cliquer sur « Exécuter » pour valider
AP3.2_eleves.odt
11/16
Paramétrons cette table :
• la première donnée (colonne) sera :
nom : date
type : TIMESSTAMP
• la 2ème donnée :
nom : valeur
type : FLOAT
Défaut : CURRENT_TIMESTAMP
Index : UNIQUE
puis cliquer sur « sauvegarder ». Voilà, votre table est créée.
Essayons de la remplir à la main :
Cliquez sur l'onglet « Insérer » et rentrez une valeur, par exemple 18,6 :
et cliquez sur « exécuter » pour valider
Vous remarquerez que phpMyAdmin vous bascule automatiquement sur l'onglet « SQL » dans lequel la vraie
requête est écrite. Remettez vous dans l'onglet « insérer » et recommencer avec 4 ou 5 valeurs différentes.
Retourner dans l'onglet « Afficher » pour voir ce qui s'est passé.
1. Que contient notre champ 'date' ?
2. Recopier la requête proposée.
3. Expliquez les différents éléments de cette requête et ce qu'elle fait exactement.
Etape 2 : création de la page php ('add.php') qui va écrire dans la base de données
Soit la page « add.php » suivante :
<?php
try
{ // connection à la base de données
// On se connecte à MySQL
$bdd = new PDO('mysql:host=adresse du serveur;dbname=nom de la base de données', 'nom de l'utilisateur', 'mot de
passe');
}
catch(Exception $e)
{
AP3.2_eleves.odt
12/16
die('Erreur : '.$e->getMessage()); // En cas d'erreur, on affiche un message et on arrête tout
}
if (isset($_GET['temp1'])) // test si la variable existe
{
$_GET['temp1'] = floatval($_GET['temp1']); // force le type float pour la variable
echo ('donnee ' .$_GET["temp1"]. ' en cours d\'ecriture</br>');
$bdd->exec('INSERT INTO temp (valeur) VALUES('.$_GET["temp1"].')');
echo ('donnee ' .$_GET['temp1']. ' ecrite!');
}
?>
4. Modifiez la page 'add.php' avec les caractéristiques de notre base de données (ligne 5) et enregistrez la
dans votre répertoire de travail Wamp (normalement : c:\wamp\test2_votre nom de famille\)
adresse du serveur : localhost
nom de la base de donnée : test
nom de l'utilisateur : root
pas de mot de passe (mettre '')
Maintenant on va envoyer une température à la base de données en appelant le programme add.php et en lui
transmettant la température dans l'URL (ce que fera Arduino plus tard).
Essayez avec l'URL suivante : http://localhost/test2_votre nom de famille/add.php?temp1=22.4
5. Que se passe-t-il ? Allez voir dans la base de donnée si tout s'est bien passé (phpMyAdmin)
Etape 3 : création de la page 'index.php' qui va lire dans la base de données et afficher une page web
avec nos valeurs
soit la page « index.php » suivante:
<?php
try
{ // connection à la base de données
$bdd = new PDO('mysql:host=adresse du serveur;dbname=nom de la base de données', 'nom de l'utilisateur', 'mot de
passe');
}
catch(Exception $e)
{
die('Erreur : '.$e->getMessage()); // En cas d'erreur, on affiche un message et on arrête tout
}
?>
<html> < !-- début de la page web -->
<head>
<title>données</title>
<meta http-equiv="refresh" content="5"/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Donn&eacute;es</h1>
<table border="1" cellspacing="1" cellpadding="1" >
<tr class='titre_tab'>
<td>&nbsp;Date & heure&nbsp;</td>
AP3.2_eleves.odt
13/16
<td>&nbsp;valeur&nbsp;</td>
</tr>
<?php
$reponse = $bdd->query('SELECT * FROM temp ORDER BY date DESC LIMIT 0, 12');
while ($donnees = $reponse->fetch())
{
?>
<tr><td>
<?php echo $donnees['date']; ?> </td><td> <?php echo $donnees['valeur']; ?>
</td></tr>
<?php
}
$reponse->closeCursor(); // Termine le traitement de la requête
?>
</table>
</body>
</html>
6. Copiez ces 2 fichiers dans votre répertoire de travail (en modifiant la ligne 4 de 'index.php' avec les
caractéristiques de votre base de données).
7. Essayez et commentez ce qui se passe (le fichier est accessible dans mozilla à l'adresse :
http://localhost/test2_votre nom de famille/index.php)
8. Tirez du programme index.php la commande adressée à la base de données et expliquez-la.
Etape 4 : maintenant le programme arduino qui va écrire dans la base de données
Pour mettre en œuvre le programme arduino il nous manque quelques données notamment l'adresse IP de
votre ordinateur sur le réseau local.
9. Ouvrez le menu « démarrer » de windows puis dans la barre de recherche taper « cmd », choisir
« cmd.exe » (en cliquant dessus). Une fenêtre s'ouvre. Taper « ipconfig » puis la touche « entrer ».
Relevez l'adresse IP (IPv4) de votre ordinateur/serveur.
10. Allez dans le menu Wampserveur et cliquer sur « Put Online (mettre en ligne ) afin que votre
ordinateur/serveur soit visible et accessible par le réseau local.
11. Copier le programme suivant dans arduino en ayant d'abord modifié:
• l'adresse Mac (ligne 5) de la carte Ethernet Shield
• l'adresse IP de l'ethernet shield (ligne 7)
• l'adresse du serveur (l'adresse IP de votre ordinateur) en lignes 42 et 48
• l'adresse du ficher « add.php » à la ligne 44
Le programme arduino :
#include <SPI.h>
#include <Ethernet.h> //Inclure la bibliothèque Ethernet
// Adresse MAC du shield (ici choisie par défaut), l'adresse IP dépend de votre réseau local
AP3.2_eleves.odt
14/16
byte mac[] = { 0x90, 0xA2, 0xDA, 0x0F, 0x15, 0x15 }; //90-A2-DA-0F-15-15
//L'adresse MAC du shield est associée à une adresse IP réseau
IPAddress ip(192,168,1,62); //192.168.1.62 à choisir sur votre réseau local
int CAPTEUR_TEMP_PIN = 4; // adressage du capteur de temperature (PIN) //
int temp = 0; //définition de la variable entière (integer) //
float temperature = 0; // variable temperature en flottant //
float const_can = 0.0048828; // constante du convertisseur //
EthernetClient client;
String data;
String stringVal;
EthernetServer server(80);
//Initialise le serveur Ethernet, port 80 par défaut pour HTTP
//function to extract decimal part of float
long getDecimal(float val)
{
int intPart = int(val);
long decPart = 1000*(val-intPart); //I am multiplying by 1000 assuming that the foat values will have a maximum of 3 decimal
places
//Change to match the number of decimal places you need
if(decPart>0)return(decPart);
//return the decimal part of float number if it is available
else if(decPart<0)return((-1)*decPart); //if negative, multiply by -1
else if(decPart=0)return(00);
//return 0 if decimal part of float number is not available
}
void setup()
{
Serial.begin(9600); //Affichage écran du PC
Ethernet.begin(mac, ip); //Démarer la connexion Ethernet et le serveur
analogRead(CAPTEUR_TEMP_PIN);
}
void loop()
{
temp = analogRead(CAPTEUR_TEMP_PIN); // lecture du capteur de température //
temperature = (((temp*const_can)*1000)-500)/10; //calcul//
if (client.connect("192.168.1.78",80)) { // remplacer par l'adresse IP de votre serveur-ordi
client.print( "GET /test2_votre nom de famille/add.php?");
client.print("temp1=");
client.print(temperature);
client.println( " HTTP/1.1");
client.println( "Host: 192.168.1.78" );
client.println( "Content-Type: application/x-www-form-urlencoded" );
client.println( "Connection: close" );
client.println();
client.println();
client.stop();
Serial.print("donnee ecrite");
Serial.println(temperature);
}
else
{
AP3.2_eleves.odt
15/16
Serial.println("problème de connection");
}
if (client.connected()) {
client.stop();
// DISCONNECT FROM THE SERVER
}
delay(30000); // attente en millisecondes
}
12. Essayez maintenant tous ça ! Attendre environ 1 minute après l'envoie du programme Arduino.. Pour
vérifier vous pouvez aller voir les données écrites dans la base de données avec phpMyAdmin ou
simplement lancer le fichier 'index.php' (le fichier est accessible dans Mozilla à l'adresse :
http://localhost/test2_votre nom de famille/index.php.
13. Expliquez ce qui se passe. Faire un résumé pour décrire comment tout ça fonctionne.
14. Exemple d'affichage plus évolué
Pour afficher de manière plus intéressantes les données (par exemple à l'aide de graphiques, courbes, ...) on
peut écrire un programme PHP qui fait tout ça. Bon, ne nous cachons pas que c'est assez difficile à faire.
Mais, des développeurs ont déjà réalisé ces programme et ils nous ont mis à disposition leurs codes. Il y en a
une certain nombre de disponible sur internet. Nous avons choisi les applications pChart (infos sur
http://wiki.pchart.net/).
Copier les répertoires « class » et « fonts » ainsi que le fichier index2b.php (à récupérer sur l'intranet)
dans votre répertoire /test2_votre nom de famille/
Dans mozilla taper l'adresse (URL): http://localhost/test2_votre nom de famille/index2b.php
Essayez.
15. Modification de « add.php »
Notre programme arduino, quand il appelle « add.php », rajoute des données dans la base de données. Tout ça
indéfiniment ce qui fait qu'au bout d'un certain temps on risque de saturer notre base de données.
Nous vous proposons qu'à chaque appel de « add.php », ce programme efface aussi les données inutiles (par
exemple on se dit que l'on garde les 200 dernières données).
A vous de jouer maintenant. Avant de faire des essais et d'effacer les données (au risque de se tromper), il
faut d'abord trouver la bonne fonction SELECT en faisant des essais. Une fois la fonction SELECT
trouvée, on la transforme en fonction d'effacement.
16. Ce TP est fini. Il faut faire un peu de ménage, c'est à dire supprimer votre basse de données.
Dans PhpMyAdmin, sélectionnez la base de données (attention à bien vérifier que c'est bien la base de
données à supprimer), dans les onglets supérieurs (structure, sql, rechercher, requête,...), sélectionnez l'onglet
opération, puis le lien "Supprimer la base de données (DROP)" (attention!!! cette étape est irréversible. ).
Une boite de dialogue apparaît. Cliquez sur OK.
AP3.2_eleves.odt
16/16