PHP: exécuter des requêtes en arrière plan

Comment exécuter des requêtes en arrière plan avec php et sans devoir recharger la page ?

Vous le savez sûrement, php est un language très puissant mais il à une contrainte, celle de recharger la page à chaque requête, ce qui peut être embêtant dans certains cas.

Ajax et PHP, ils font la paire !

Vous l’aurez compris, nous allons utilisé Ajax pour arriver à nos fins.

C’est quoi Ajax ?

Ajax est une méthode utilisant différentes technologies ajoutées aux navigateurs web entre 1995 et 2005, et dont la particularité est de permettre d’effectuer des requêtes au serveur web et, en conséquence, de modifier partiellement la page web affichée sur le poste client sans avoir à afficher une nouvelle page complète. Cette architecture informatique permet de construire des applications web et des sites web dynamiques et interactifs. Ajax est l’acronyme d’asynchronous JavaScript and XML : JavaScript et XML asynchrones.

Voici ce que nous dis Wikipedia, si ça ne vous parles pas, en gros, il permet d’exécuter des requêtes à la même manière qu’une API. C’est à dire : Il va exécuter la requête demandé, attendre la réponse, et la renvoyé, le plus souvent la réponse est en JSON, ou simplement un tableau.

Passons à la pratique

Nous allons maintenant voir ensemble comment mettre à jour un article en base de données sans recharger la page avec Ajax et PHP.

Tout d’abord, nous allons créer notre base de données :

Base de données SQL à créer
Table à insérer dans la base de données

Nous allons ensuite y ajouter simplement deux articles :

Ligna à insérer dans la table

Une fois cela fait, nous pouvons créer notre premier fichier : index.php

Nous faisons simplement une page basique en HTML

Structure HTML basique
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutoriel Ajax</title>
</head>
<body>
    
</body>
</html>

Une fois cela fait, nous allons créer 2 autres fichiers : database.php et requete.php

Database.php

Ici, nous faisons une simple connexion à la base de données et on affiche une erreur si on ne parvient pas à s’y connecter.

Script php de connexion à une base de données
<?php
try {
    $bdd = new PDO('mysql:host=localhost;dbname=tuto_ajax;charset=utf8', 'root', '');
} catch (Exception $e) {
    die('Erreur : ' . $e->getMessage());
}

requete.php

Ici, nous vérifions si les paramètres POST sont bien reçu en premier temps.
Ensuite nous allons inclure notre fichier database.php afin de récupérer notre connexion SQL.
Après ça nous avons une simple mise à jour de l’article dans la base de données (Ici, nous appelons la méthode prepare() afin d’éviter les injections SQL et nous passons les paramètres dans un tableau), et nous retournons le résultats. Nous retournons une chaine de caractère si un des paramètres attendus n’est pas là.

Script exécuter avec Ajax
<?php
if(isset($_POST['nom']) && isset($_POST['prix']) && isset($_POST['id'])){
    require_once('./database.php');

    $req = 'UPDATE article SET nom = ?, prix = ? WHERE id = ?';
    $prep = $bdd->prepare($req);
    $prep->execute(array(
        $_POST['nom'],
        $_POST['prix'],
        $_POST['id']
    ));

    return $prep;
} else {
    return 'Erreur survenue';
}

Voilà nos 3 fichiers prêt à recevoir une requête ajax.

Petite script PHP pour récupérer un article

Nous allons maintenant récupérer un article, nous passerons un paramètre GET pour récupérer l’article voulu, ici, le paramètre sera ‘id’.

Nous allons inclure tout d’abord, le fichier database.php afin de récupérer la connexion SQL.
Ensuite nous vérifions que notre variable $bdd et bien définis, si la connexion échoue, $bdd ne sera pas définis et nous aurons une erreur.
Nous vérifions ensuite si un paramètre GET nommé « id » est bien définis, sinon on récupère le 1er article.
Nous faisons ensuite notre requête SQL, en la préparant pour éviter les injections.
Ensuite, une boucle foreach pour obtenir le résultats et des « input » pour pouvoir les modifier.

Script PHP pour récupérer un article
<?php require_once('./database.php'); ?>

    <?php if (isset($bdd)) : ?>
        <?php
        if(isset($_GET['id'])){
            $id = $_GET['id'];
        } else {
            $id = 1;
        }
        $prepare = 'SELECT * FROM article WHERE id = ? LIMIT 1';
        $requete = $bdd->prepare($prepare);
        $requete->execute(array($id));
        foreach ($requete as $one) :
        ?>
            <div style="padding: 2rem;">
                <input type="text" name="nom" id="nom" value="<?= $one['nom'] ?>">
                <input type="number" name="prix" id="prix" value="<?= $one['prix'] ?>">
                <button onclick="updateArticle()">Mettre à jour</button>
            </div>
        <?php endforeach ?>
    <?php endif; ?>

La requête Ajax

Passons à la requête.
Voici une simple requête Ajax (Il faut inclure Jquery, car Ajax fonctionne avec Jquery) :

Structure d'un script Ajex basique
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        let nom = document.getElementById('nom').value;
        let prix = document.getElementById('prix').value;

        $.ajax({
        url: 'fichier.php',
        type: 'POST', // Le type de la requête HTTP, ici POST, peut aussi être GET
        data: '', // Les données à envoyer
        dataType: 'html', // Le type de données
        success: (result, statut) => { // Si la requête à réussi
            return true;
        },
        error: (result, statur, err) => { // Si la requête à échoué
           return false;
        }
    });
    </script>

Nous allons maintenant modifier notre petit script Ajax, afin de l’adapter à notre cas :

Nous allons rajouter un « input:hidden » afin de récupérer l’id de notre article.
Pour la requête, nous avons aussi rajouté la variable id et dans cette variable nous récupérons notre value du champ id.
Nous appelons donc notre url : requete.php (Le fichier que nous avons créé plus haut), en méthode : POST, les datas que nous voulons envoyer, et le type: HTML.
Et n’oubliez pas de déclarer une fonction du même nom que dans le « onclick »

Structure du code Javascript avec Ajax
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        function updateArticle() {
            let nom = document.getElementById('nom').value;
            let prix = document.getElementById('prix').value;
            let id = document.getElementById('id').value;

            $.ajax({
                url: 'requette.php',
                type: 'POST', // Le type de la requête HTTP, ici POST, peut aussi être GET
                data: 'nom=' + nom + '&prix=' + prix + '&id=' + id, // Les données à envoyer
                dataType: 'html', // Le type de données
                success: (result, statut) => { // Si la requête à réussi
                    document.getElementById('msg').innerHTML = "Votre article à bien été mis à jour !";
                },
                error: (result, statur, err) => { // Si la requête à échoué
                    console.log(err);
                    console.log(result);
                    console.log(statut);
                    document.getElementById('msg').innerHTML = "Une erreur est survenue, regardez la console !";
                }
            });
        }
    </script>

Voici notre fichier index.php complet :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutoriel Ajax</title>
</head>

<body>
    <?php require_once('./database.php'); ?>

    <?php if (isset($bdd)) : ?>
        <?php
        if (isset($_GET['id'])) {
            $id = $_GET['id'];
        } else {
            $id = 1;
        }
        $prepare = 'SELECT * FROM article WHERE id = ? LIMIT 1';
        $requete = $bdd->prepare($prepare);
        $requete->execute(array($id));
        foreach ($requete as $one) :
        ?>
            <div style="padding: 2rem;">
                <input type="text" name="nom" id="nom" value="<?= $one['nom'] ?>">
                <input type="number" name="prix" id="prix" value="<?= $one['prix'] ?>">
                <input type="hidden" name="id" id="id" value="<?= $one['id'] ?>">
                <button onclick="updateArticle()">Mettre à jour</button>
                <div id="msg"></div>
            </div>
        <?php endforeach ?>
    <?php endif; ?>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        function updateArticle() {
            let nom = document.getElementById('nom').value;
            let prix = document.getElementById('prix').value;
            let id = document.getElementById('id').value;

            $.ajax({
                url: 'requette.php',
                type: 'POST', // Le type de la requête HTTP, ici POST, peut aussi être GET
                data: 'nom=' + nom + '&prix=' + prix + '&id=' + id, // Les données à envoyer
                dataType: 'html', // Le type de données
                success: (result, statut) => { // Si la requête à réussi
                    document.getElementById('msg').innerHTML = "Votre article à bien été mis à jour !";
                },
                error: (result, statur, err) => { // Si la requête à échoué
                    console.log(err);
                    console.log(result);
                    console.log(statut);
                    document.getElementById('msg').innerHTML = "Une erreur est survenue, regardez la console !";
                }
            });
        }
    </script>
</body>

</html>
Remarque: Nous avons ajouté une <idv id= »msg »> afin d’afficher le message de retour.

Voilà le résultat

Résultat obtenue en HTML
Résultats mis à jour en base de données
Attention : Prenez bien soin de faire plusieurs vérification côté serveur, afin d’éviter les injection XSS ou autres..

En espérant que ce petit tutoriel vous auras plu !
Au prochain tuto !

Bye 😀

Voici un autre tutoriel sur PHP : https://blog.yourstories.fr/php/linclusion-de-page-dynamique-en-php/

By root

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

*

code