Forum d'entraide PHPFrance

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>");
}
});

});

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.

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.

Je le fais avec Timestamp.

Oui, tant que tu as une valeur à "trier", c'est bon un timestamp.

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!

Imagine une fonction JS appelée toutes les 10 secondes, il te faut donc une fonction :

//appeler la fonction à intervalle de 10 secondes
setInterval(faireAppelAjax, 10000); // 10000 ms = 10 secondes

La fonction contient l'appel AJAX :

    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);
            }
        });
    }

Tu peux appeler la fonction une première fois, pour ne pas attendre 10s :

faireAppelAjax();

N'oublie pas d'inclure jQuery.

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

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 :

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>

Et un fichier LirePrix.php :

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);
?>

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

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 ?

Commençons par le commencement, est ce que LirePrix.php affiche les résultats attendus ?

Bonjour two3d, or1,

LirePrix.php affiche :

Code : Tout sélectionner

{"numero":"1","prix":"36"}

C'est déjà un début mais pour la suite, c'est le vague absolu!

Merci.

pour OR 1,

C'est quoi la console du navigateur ? Comment l'afficher?

Merci.

Bonjour two3d, or1,

LirePrix.php affiche :

Code : Tout sélectionner
{"numero":"1","prix":"36"}
C'est déjà un début mais pour la suite, c'est le vague absolu!

Merci.

Pour l'afficher côté client :

success: function(data) {
//data.numero
//et
//data.prix
//seront tes variables
}

pour OR 1,

C'est quoi la console du navigateur ? Comment l'afficher?

Merci.

CTRL + MAJ + i, la console affiche les message "console.log (ou .info, .error, .table, etc)" s'il yen a.

https://developer.mozilla.org/fr/docs/W ... log_static

Bonjour two3d,

J'y suis arrivé grâce à toi.

Merci.

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 :

Code : Tout sélectionner

$('#Temp').text(data.Temp);
$('#Hum').text(data.Hum);

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 :

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> &deg;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>

Merci.

Forum d'entraide PHPFrance

Comment afficher la dernière entrée d'une base de données MYSQL de mnière dynamique avec AJAX?

Comment afficher la dernière entrée d'une base de données MYSQL de mnière dynamique avec AJAX?

Re: Comment afficher la dernière entrée d'une base de données MYSQL de mnière dynamique avec AJAX?

Re: Comment afficher la dernière entrée d'une base de données MYSQL de mnière dynamique avec AJAX?

Re: Comment afficher la dernière entrée d'une base de données MYSQL de mnière dynamique avec AJAX?

Re: Comment afficher la dernière entrée d'une base de données MYSQL de mnière dynamique avec AJAX?

Re: Comment afficher la dernière entrée d'une base de données MYSQL de mnière dynamique avec AJAX?

Re: Comment afficher la dernière entrée d'une base de données MYSQL de mnière dynamique avec AJAX?

Re: Comment afficher la dernière entrée d'une base de données MYSQL de mnière dynamique avec AJAX?

Re: Comment afficher la dernière entrée d'une base de données MYSQL de mnière dynamique avec AJAX?

Re: Comment afficher la dernière entrée d'une base de données MYSQL de mnière dynamique avec AJAX?

Re: Comment afficher la dernière entrée d'une base de données MYSQL de mnière dynamique avec AJAX?

Re: Comment afficher la dernière entrée d'une base de données MYSQL de mnière dynamique avec AJAX?

Re: Comment afficher la dernière entrée d'une base de données MYSQL de mnière dynamique avec AJAX?

Re: Comment afficher la dernière entrée d'une base de données MYSQL de mnière dynamique avec AJAX?

Re: Comment afficher la dernière entrée d'une base de données MYSQL de mnière dynamique avec AJAX?