Bonjour à tous,
J'ai une base de données MYSQL, hébergée chez Alwaysdata, qui reçoit périodiquement des données d'un capteur BME280 avec un sketch Arduino.
J'aimerai aficher, de manière dynamique la dernière entrée de cette BDD à l'aide d'une fonction Ajax.
Mais, je ne sais pas comment m'y prendre?
-J'ai un fichier index.php :
<?php
include("connect.php");
$link=Connection();
$result=MySQLi_query($link, "SELECT * FROM `tempLog` ORDER BY `timeStamp` DESC");
?>
<html>
<head>
<title>Sensor Data</title>
</head>
<body>
<h1>Temperature / Humidity / Pression sensor readings</h1>
<table border="1" cellspacing="1" cellpadding="1">
<tr>
<td> Timestamp </td>
<td> Sensor </td>
<td> Location </td>
<td> Temperature </td>
<td> Humidity </td>
<td> Pression </td>
</tr>
<?php
if ($result !== FALSE) {
$row = mysqli_fetch_array($result);
printf("<tr><td> %s </td><td> %s </td><td> %s </td><td> %s </td><td> %s </td><td> %s </td></tr>",
$row["timeStamp"], $row["sensor"], $row["location"], $row["temperature"], $row["humidity"], $row["pression"]);
mysqli_free_result($result);
}
mysqli_close($link);
?>
</table>
</body>
</html>
- un fichier connect.php :
<?php
function Connection(){
$server="mysql-mahi04270.alwaysdata.xxx";
$user="mahi04270";
$pass="gxxxxxx";
$db="mahi04270_sensors";
$connection = MySQLi_connect($server, $user, $pass, $db);
if (!$connection) {
die('MySQLi ERROR: ' . MySQLi_error());
}
MySQLi_select_db($connection, $db) or die( 'MySQLi ERROR connection: '. MySQLi_error($connection) );
return $connection;
}
?>
- et un fichier script.js :
$(document).ready(function() {
// Requête Ajax pour récupérer la dernière entrée
$.ajax({
url: "index.php",
type: "GET",
dataType: "json",
success: function(data) {
// Affichage des données du client
$("#client").html(
"<p>Timestamp : " + data.timeStamp + "</p>" +
"<p>Sensor : " + data.sensor + "</p>" +
"<p>location : " + data.location + "</p>" +
"<p>Temperature : " + data.temperature + "</p>" +
"<p>Humidity : " + data.humidity + "</p>" +
"<p>Pression : " + data.pression + "</p>");
}
});
});
la communauté d'entraide francophone dédiée au PHP
Comment afficher la dernière entrée d'une base de données MYSQL de mnière dynamique avec AJAX?
Pour récupérer le dernier ID, il te faut une colonne id en AI (auto incrément) à ta table tempLog.
Tu tri ensuite en "id DESC" puis tu limite le résultat à 1 : LIMIT 1
Concernant l'ajax, tu appel le fichier qui fait la requête SQL. Tu peux utiliser l'API fetch ou la librairie connue jQuery > $.post.
Tu tri ensuite en "id DESC" puis tu limite le résultat à 1 : LIMIT 1
Concernant l'ajax, tu appel le fichier qui fait la requête SQL. Tu peux utiliser l'API fetch ou la librairie connue jQuery > $.post.
Bonjour two3d,
Ok pour récupérer la dernière entrée dans la base. Je le fais avec Timestamp mais je peux faire un Id auto incrément.
Par contre, là ou je bloque c'est pour la partie affichage dynamique avec Jquery et Ajax.
je n'arrive pas à visualiser le passage entre les données récupérées ( en Json ?) et la page Ajax qui va les afficher avec un inervale de 10 s par exemple!
Un exemple de code m'aiderai beaucoup!
Merci.
Ok pour récupérer la dernière entrée dans la base. Je le fais avec Timestamp mais je peux faire un Id auto incrément.
Par contre, là ou je bloque c'est pour la partie affichage dynamique avec Jquery et Ajax.
je n'arrive pas à visualiser le passage entre les données récupérées ( en Json ?) et la page Ajax qui va les afficher avec un inervale de 10 s par exemple!
Un exemple de code m'aiderai beaucoup!
Merci.
Oui, tant que tu as une valeur à "trier", c'est bon un timestamp.Je le fais avec Timestamp.
Imagine une fonction JS appelée toutes les 10 secondes, il te faut donc une fonction :Par contre, là ou je bloque c'est pour la partie affichage dynamique avec Jquery et Ajax.
je n'arrive pas à visualiser le passage entre les données récupérées ( en Json ?) et la page Ajax qui va les afficher avec un inervale de 10 s par exemple!
//appeler la fonction à intervalle de 10 secondes
setInterval(faireAppelAjax, 10000); // 10000 ms = 10 secondes function faireAppelAjax() {
$.ajax({
url: 'requete.php', //URL du fichier PHP qui fait la requête SQL
type: 'GET',
dataType: 'json', // On attend une réponse JSON
success: function(data) {
//traitement des données reçues (data)
console.log('Données reçues : ', data);
//mettre ici le code pour traiter les données selon tes besoins
},
error: function(xhr, status, error) {
console.error('Erreur lors de la requête AJAX :', status, error);
}
});
}faireAppelAjax();Bonjour Two3d,
Je galère...
Je tente de mettre en application ce que tu m'as écrit mais j'avoue ne pas trop savoir ou placer ces deux fonctions Javascript.
J'ai pris une base très simple avec 2 colonnes : id et prix pour tester
J'ai fais un fichier affiche data.htm :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>AJAX et jQuery</title>
<script src="https://code.jquery(.)com/jquery-latest.js"></script>
<script>
function faireAppelAjax() {
$.ajax({
url: 'lirePrix.php', //URL du fichier PHP qui fait la requête SQL
type: 'GET',
dataType: 'json', // On attend une réponse JSON
success: function(data) {
//traitement des données reçues (data)
console.log('Données reçues : ', data);
//mettre ici le code pour traiter les données selon tes besoins
var objJSON = JSON.parse(data);
$("#texte1").text("Le prix du numero " + objJSON.numero + " est : " + objJSON.prix + " €");
},
error: function(xhr, status, error) {
console.error('Erreur lors de la requête AJAX :', status, error);
}
});
}
</script>
</head>
<body>
<div>
<h1>Affichage Data avec JavaScript</h1>
<script type="text/javascript">
faireAppelAjax()
</script>
</div>
</body>
</html>
Le fichier LirePrix.php :
<?php
$mysqli = new mysqli("mysql-mahi04270.alwaysdata(.)net", "mahi04270", "gxxxxxx", "mahi04270_sensors");
$requete = "SELECT * FROM produits WHERE numero = 1";
$resultat = $mysqli->query($requete);
$ligne = $resultat->fetch_assoc();
echo json_encode($ligne);
?>
Mais rien ne s'affiche...
Je suis vraiment un débutant en JS et Ajax. Je suis plus à l'aise sur le C++ et arduino.
Peux-tu encore m'aider?
Merci
Je galère...
Je tente de mettre en application ce que tu m'as écrit mais j'avoue ne pas trop savoir ou placer ces deux fonctions Javascript.
J'ai pris une base très simple avec 2 colonnes : id et prix pour tester
J'ai fais un fichier affiche data.htm :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>AJAX et jQuery</title>
<script src="https://code.jquery(.)com/jquery-latest.js"></script>
<script>
function faireAppelAjax() {
$.ajax({
url: 'lirePrix.php', //URL du fichier PHP qui fait la requête SQL
type: 'GET',
dataType: 'json', // On attend une réponse JSON
success: function(data) {
//traitement des données reçues (data)
console.log('Données reçues : ', data);
//mettre ici le code pour traiter les données selon tes besoins
var objJSON = JSON.parse(data);
$("#texte1").text("Le prix du numero " + objJSON.numero + " est : " + objJSON.prix + " €");
},
error: function(xhr, status, error) {
console.error('Erreur lors de la requête AJAX :', status, error);
}
});
}
</script>
</head>
<body>
<div>
<h1>Affichage Data avec JavaScript</h1>
<script type="text/javascript">
faireAppelAjax()
</script>
</div>
</body>
</html>
Le fichier LirePrix.php :
<?php
$mysqli = new mysqli("mysql-mahi04270.alwaysdata(.)net", "mahi04270", "gxxxxxx", "mahi04270_sensors");
$requete = "SELECT * FROM produits WHERE numero = 1";
$resultat = $mysqli->query($requete);
$ligne = $resultat->fetch_assoc();
echo json_encode($ligne);
?>
Mais rien ne s'affiche...
Je suis vraiment un débutant en JS et Ajax. Je suis plus à l'aise sur le C++ et arduino.
Peux-tu encore m'aider?
Merci
Mets ton code dans les balise code stp et ne met pas tes logins mysql, même à peine.
Bonjour Two3d,
Je reprends mon précédent post.
Je galère dur!
Je tente de mettre en application ce que tu m'as écrit mais j'avoue ne pas trop savoir ou placer ces deux fonctions Javascript.
J'ai pris une base très simple avec 2 colonnes : id et prix pour tester
J'ai fais un fichier affiche data.htm :
Et un fichier LirePrix.php :
Mais rien ne s'affiche...
Je suis vraiment un débutant en JS et Ajax. Je suis plus à l'aise sur le C++ et arduino.
Peux-tu encore m'aider?
Merci
Je reprends mon précédent post.
Je galère dur!
Je tente de mettre en application ce que tu m'as écrit mais j'avoue ne pas trop savoir ou placer ces deux fonctions Javascript.
J'ai pris une base très simple avec 2 colonnes : id et prix pour tester
J'ai fais un fichier affiche data.htm :
Code : Tout sélectionner
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>AJAX et jQuery</title>
<script src="https://code.jquery(.)com/jquery-latest.js"></script>
<script>
function faireAppelAjax() {
$.ajax({
url: 'lirePrix.php', //URL du fichier PHP qui fait la requête SQL
type: 'GET',
dataType: 'json', // On attend une réponse JSON
success: function(data) {
//traitement des données reçues (data)
console.log('Données reçues : ', data);
//mettre ici le code pour traiter les données selon tes besoins
var objJSON = JSON.parse(data);
$("#texte1").text("Le prix du numero " + objJSON.numero + " est : " + objJSON.prix + " €");
},
error: function(xhr, status, error) {
console.error('Erreur lors de la requête AJAX :', status, error);
}
});
}
</script>
</head>
<body>
<div>
<h1>Affichage Data avec JavaScript</h1>
<script type="text/javascript">
// Ici on apelle la fonction
faireAppelAjax()
</script>
</div>
</body>
</html>
Code : Tout sélectionner
<?php
$mysqli = new mysqli("URL", "Login", "pass", "Base");
$requete = "SELECT * FROM produits WHERE numero = 1";
$resultat = $mysqli->query($requete);
$ligne = $resultat->fetch_assoc();
echo json_encode($ligne);
?>
Je suis vraiment un débutant en JS et Ajax. Je suis plus à l'aise sur le C++ et arduino.
Peux-tu encore m'aider?
Merci
il y a des lignes essentielles dans l'exemple que vous avez copié/collé que vous n'avez pas reprises alors cela ne fonctionne pas.
que dit la console de vote navigateur ?
que dit la console de vote navigateur ?
Commençons par le commencement, est ce que LirePrix.php affiche les résultats attendus ?
Bonjour two3d, or1,
LirePrix.php affiche :
C'est déjà un début mais pour la suite, c'est le vague absolu!
Merci.
LirePrix.php affiche :
Code : Tout sélectionner
{"numero":"1","prix":"36"}
Merci.
Pour l'afficher côté client :Bonjour two3d, or1,
LirePrix.php affiche :
C'est déjà un début mais pour la suite, c'est le vague absolu!Code : Tout sélectionner
{"numero":"1","prix":"36"}
Merci.
success: function(data) {
//data.numero
//et
//data.prix
//seront tes variables
}CTRL + MAJ + i, la console affiche les message "console.log (ou .info, .error, .table, etc)" s'il yen a.pour OR 1,
C'est quoi la console du navigateur ? Comment l'afficher?
Merci.
https://developer.mozilla.org/fr/docs/W ... log_static
Bonjour à tous,
Grace à two3d, je suis arrivé à ce que je voulais faire, à savoir : afficher des données d'une balise météo, à partir d'une base MYSQL, sur une page HTML.
J'utilise Bootstrap pour la mise en forme. et j'arrive à afficher les données de manière dynamique avec Ajax.
Je me demandais s'il n'y avait pas la possibilité de remplacer ces lignes :
par une fonction qui ferait la même chose ( car je vais avoir plus de données à afficher à terme).
Voici le code complet utilisé et qui fonctionne :
Merci.
Grace à two3d, je suis arrivé à ce que je voulais faire, à savoir : afficher des données d'une balise météo, à partir d'une base MYSQL, sur une page HTML.
J'utilise Bootstrap pour la mise en forme. et j'arrive à afficher les données de manière dynamique avec Ajax.
Je me demandais s'il n'y avait pas la possibilité de remplacer ces lignes :
Code : Tout sélectionner
$('#Temp').text(data.Temp);
$('#Hum').text(data.Hum);
Voici le code complet utilisé et qui fonctionne :
Code : Tout sélectionner
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Affichage Dynamique avec Ajax</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="stylesheet" href="bootstrap.min.css" media="screen">
</head>
<body>
<div class="jumbotron">
<h2 class="display-4">Home Balise </h2>
<p class="lead">Affichage Dynamique</p>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="card text-white bg-primary mb-3 text-center" style="max-width: 20rem;">
<div class="card-header" id="thermo">Thermometre </div>
<h2 class="display-4"><span id="Temp"></span> °C</h2>
<div class="card-header" id="thermo">Humidity </div>
<h2 class="display-4"><span id="Hum"></span> %</h2>
</div>
</div>
</div>
</div>
<p id="texte"></p>
<!-- Footer -->
<footer class="footer">
<div class="container-fluid bg-primary text-center fixed-bottom">
<span class="text-muted"> © 2018
<a href="https://mdbootstrap.com/bootstrap-tutorial/"> byfeel.info</a></span>
</div>
</footer>
<!-- Footer -->
<!-- Bootstrap core JavaScript
================================================== -->
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script>
function AppelAjax() {
$.ajax({
url: 'lireData.php', //URL du fichier PHP qui fait la requête SQL
type: 'GET',
dataType: 'json', // On attend une réponse JSON
success: function(data) {
//traitement des données reçues (data)
console.log('Données reçues : ', data);
//mettre ici le code pour traiter les données selon tes besoins
$('#Temp').text(data.Temp);
$('#Hum').text(data.Hum);
//$("#texte").text("Temp : " + data.Temp + " Hum : " + data.Hum);
},
error: function(xhr, status, error) {
console.error('Erreur lors de la requête AJAX :', status, error);
}
});
}
AppelAjax(); // premiere execution
setInterval(function(){
AppelAjax() // rappel toutes les 10 secondes
}, 10000);
</script>
</body>
</html>