8721 sujets

Développement web côté serveur, CMS

Changer une variable en Live

Bonjour,

Je souhaite changer une variable en live.
Voici un exemple simple :

J'ai une page avec le score d'un match de la France et je veux que quand je mette à jour le score dans ma base de donnée, le score se met à jour automatiquement dans la page.

En faisant des recherches je pense qu'il faut que je passe par de l'ajax, mai je ne comprends pas bien comment ça marche.

Voici mon code : 

<!DOCTYPE html>
<html lang="fr">
	<head>
		<title>Test données en live</title>
                <meta charset="utf-8">
    </head>
<body>

    <h1>Test données en live</h1>
    <p>France : <span id="score_fr"><?php $data['score']; ?></span></p>

<script src="jquery.js"></script>
<script type="text/javascript">

    $('#score_fr').html('');
</script>
    
</body>
</html>



<?php

session_start();
define("SQL_HOST","localhost");
define("SQL_USER", "root");
define("SQL_PASS", "");
define("SQL_DBNAME", "score");

try{
	$db = new PDO("mysql:dbname=".SQL_DBNAME.";charset=utf8;host=".SQL_HOST,SQL_USER,SQL_PASS);
}catch(Execption $e){
	die('Erreur : ' . $e->getMessage());
}

$score_fr = $db->prepare('SELECT * FROM score WHERE pays = :i');
$score_fr->bindParam(':i', 'France', PDO::PARAM_INT);
$score_fr->execute();
$data = $score_fr->fetch(PDO::FETCH_ASSOC);
?>


Merci à ceux qui pourront m'aider !
Modifié par Lotte97 (19 Nov 2017 - 14:36)
Modérateur
Salut,

<<<EDIT
1. tu envoies un header adéquate (ci-dessous pour ce qu'il te faut comme type de header),
2. De la variable $data, tu vas la transformer en json,
EDIT;
3. tu places un petit die()
4. en AJAX tu appelles ton json (l'url) que tu viens de créer
5. tu dynamises le html (underscorejs ou loadash ou ou handlebarjs ou template ES6 te sera utile)
Modifié par niuxe (20 Nov 2017 - 10:30)
Lotte97 a écrit :

Je souhaite changer une variable en live.

J'ai une page avec le score d'un match de la France et je veux que quand je mette à jour le score dans ma base de donnée, le score se met à jour automatiquement dans la page.

En faisant des recherches je pense qu'il faut que je passe par de l'ajax, mai je ne comprends pas bien comment ça marche.


Alors non, t'es pas obliger de passer par AJAX. Car là ta demandes dis "quand je mette à jour le score dans ma base de donnée", donc j'imagine que tu met à jour ta base de données manuellement (ou alors il faut être plus explicite). Du coup c'est au chargement de la page que ta requête select mettra à jour ta base.
Ajax c'est là pour éviter le rafraîchissement de la page entière.
Modifié par JENCAL (20 Nov 2017 - 15:07)
Modérateur
JENCAL a écrit :


Alors non, t'es pas obliger de passer par AJAX. Car là ta demandes dis "quand je mette à jour le score dans ma base de donnée", donc j'imagine que tu met à jour ta base de données manuellement (ou alors il faut être plus explicite). Du coup c'est au chargement de la page que ta requête select mettra à jour ta base.
Ajax c'est là pour éviter le rafraîchissement de la page entière.


Bonsoir Jencal,

apriori il veut recevoir les informations en temps réel (son message initial), c'est la raison pour laquelle, je l'ai redirigé vers l'AJAX. J'ai oublié de mentionner qu'il faille déclarer un setInval. Mais bon pour le coup, il a déjà une bonne piste à suivre suivant ce que je lui ai écrit.
Hello,
Oui en effet on ne sait pas trop si le score est mis à jour en base de donnée depuis la même page ou bien si il y a 2 pages distinctes : une affichant le score et une autre d'administration.
En lisant la demande initiale, j'opterais pour la 2è option, est-ce le cas ?

Si c'est le cas, il faut en effet utiliser un appel AJAX sur la page de score envoyé de manière constante tel un "battement de coeur".
Pour ça, tu peux suivre le process de niuxe sans oublier le principal, l'appel régulier...
Par exemple :

score.php
<?php

class Score {

    protected $pdo;
    
    public function __construct() {
        session_start();
        define("SQL_HOST","localhost");
        define("SQL_USER", "root");
        define("SQL_PASS", "");
        define("SQL_DBNAME", "score");

        try{
            $this->pdo = new PDO("mysql:dbname=".SQL_DBNAME.";charset=utf8;host=".SQL_HOST,SQL_USER,SQL_PASS);
        }catch(Exception $e){
            die('Erreur : ' . $e->getMessage());
        }
    }

    public function getScore($data) {
        $pays = htmlspecialchars($data['pays']);
        $score_fr = $this->pdo->prepare('SELECT * FROM score WHERE pays = :i');
        $score_fr->bindParam(':i', $pays);
        $score_fr->execute();
        $data = $score_fr->fetch(PDO::FETCH_OBJ);
        return $data->score;
    }
}



if(isset($_POST['action'])) {
    $scoreObject = new Score();
    $score = $scoreObject->{$_POST['action']}($_POST);

    header('Content-Type: application/json');
    echo json_encode($score);
}


index.php

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Titre</title>
    <script
            src="https://code.jquery.com/jquery-3.2.1.min.js"
            integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
            crossorigin="anonymous"></script>
</head>
<body>

<h1>Test données en live</h1>
<p>France : <span id="score_fr"></span></p>

<script type="text/javascript">
    (function() {

        var $score = $('#score_fr');

        var getData = function() {
            $.post(
                'score.php',
                {
                    action: 'getScore',
                    pays: 'France'
                },
                function(score) {
                    console.log(score);
                    $score.text(score);
                }
            );
            setTimeout(getData, 1000);
        };
        getData();
    })();
</script>

</body>
</html>
Sujet clos
Aller à