Médiaforma

All posts tagged post

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Requête post $.ajax()</title>
    <style>
      #zone {
        width: 300px;
        height: 315px;
        border-style: solid;
        border-width: 3px;
        border-color: black;
      }
    </style>
  </head>
  <body>
    <script src="jquery.js"></script>
    <h2>Les lois de la robotique, selon Isaac Asimov</h2>
    <button id="loi1">Loi N° 1</button>
    <button id="loi2">Loi N° 2</button>
    <button id="loi3">Loi N° 3</button><br><br>
    <div id="zone"></div>
    <script>
      $(function() {
        $('#loi1').on('click', function(){
          $.ajax({
            type: 'POST',
            url: 'donneesPost.php',
            data: {l:'1'},
            timeout: 3000,
            success: function(data){
              $('#zone').html(data);
            },
            error: function(){
              $('#zone').html('Cette requête AJAX n\'a pas abouti');
            }
          });
        });
        $('#loi2').on('click', function(){
          $.ajax({
            type: 'POST',
            url: 'donneesPost.php',
            data: {l:'2'},
            timeout: 3000,
            success: function(data){
              $('#zone').html(data);
            },
            error: function(){
              $('#zone').html('Cette requête AJAX n\'a pas abouti');
            }
          });
        });
        $('#loi3').on('click', function(){
          $.ajax({
            type: 'POST',
            url: 'donneesPost.php',
            data: {l:'3'},
            timeout: 3000,
            success: function(data){
              $('#zone').html(data);
            },
            error: function(){
              $('#zone').html('Cette requête AJAX n\'a pas abouti');
            }
          });
        });
      });
    </script>
  </body>
</html>

Ce code est accessible ici : https://www.mediaforma.com/encours/postAjax.htm


Dans l’exemple précédent, les paramètres passés apparaissaient dans l’URL. Pour garder les paramètres secrets ou pour passer des données de taille importante, vous utiliserez une requête POST.

Voici la syntaxe de la fonction $.post() :

$.post(URL, {donnée1: 'valeur1', donnée2: 'valeur2',…}, function() {

// Une ou plusieurs instructions exécutées lorsque les données ont été rapatriées

});

 

Ici, les données sont passées dans le deuxième paramètre de la fonction $.post().

Nous allons modifier le code du programme précédent pour accéder aux données via une requête POST.

L’URL interrogée aura pour nom donneesPost.php. Une seule donnée nommée “l” sera communiquée. Elle aura pour valeur 1, 2 ou 3 selon la loi à afficher.

Le programme PHP est légèrement différent :

<?php
  $loi = array("Un robot ne peut porter atteinte à un être humain, ni, restant passif, permettre qu'un être humain soit exposé au danger.",
               "Un robot doit obéir aux ordres que lui donne un être humain, sauf si de tels ordres entrent en conflit avec la Première loi.",
               "Un robot doit protéger son existence tant que cette protection n'entre pas en conflit avec la Première ou la Deuxième loi.");
  $l=$_POST["l"];
  echo "<u>Loi de la robotique N° ".$l."</u><br><br>";
  echo "<b>".$loi[$l-1]."</b>";
?>

Le code HTML5/jQuery est également légèrement différent :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Requête AJAX $.post()</title>
    <style>
      #zone {
        width: 300px;
        height: 315px;
        border-style: solid;
        border-width: 3px;
        border-color: black;
      }
    </style>
  </head>
  <body>
    <script src="jquery.js"></script>
    <h2>Les lois de la robotique, selon Isaac Asimov</h2>
    <button id="loi1">Loi N° 1</button>
    <button id="loi2">Loi N° 2</button>
    <button id="loi3">Loi N° 3</button><br><br>
    <div id="zone"></div>
    <script>
      $(function() {
        $('#loi1').on('click', function(){
          $.post('donneesPost.php',{l:'1'},function(data){
            $('#zone').html(data);
          });
        });
        $('#loi2').on('click', function(){
          $.post('donneesPost.php',{l:'2'},function(data){
            $('#zone').html(data);
          });
        });
        $('#loi3').on('click', function(){
          $.post('donneesPost.php',{l:'3'},function(data){
            $('#zone').html(data);
          });
        });
      });
    </script>
  </body>
</html>

 

Le résultat est bien entendu le même que pour la requête GET.


Dans la section précédente, vous avez appris à transmettre des données par l’URL. Cette technique fonctionne parfaitement, mais elle a deux principaux désavantages :

  • Le nombre de paramètres transmissibles est limité par la longueur de l’URL.
  • Les paramètres transmis apparaissent en clair et l’utilisateur peut, s’il le souhaite, les modifier en agissant sur l’URL.

Pour résoudre ces deux problèmes, on utilise une transmission de données par formulaires.

Voici le code d’un formulaire traditionnel. Lorsque l’utilisateur clique sur le bouton Envoyer, les données contenues dans le formulaire sont transmises au script traitement.php en utilisant la méthode POST :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Transission de données par un formulaire</title>
  </head>
  <body>
    <form name="MonFormulaire" method="post" action="traitement.php">
      <table><tr><td><label>Prénom</label></td>
      <td><input type="text" name="prenom"></td></tr>

      <tr><td><label>Nom</label></td>
      <td><input type="text" name="nom"></td></tr>

      <tr><td><label>Mot de passe</label></td>
      <td><input type="password" name="mdp"></td></tr>

      <tr><td><label>Age</label></td>
      <td><select name="age">
        <option><20 ans</option>
        <option>20 à 50 ans</option>
        <option>>50 ans</option>
      </select></td></tr>

      <tr><td><label>Observations</label></td>
      <td><textarea name="observations" cols="40" rows="4"></textarea></td></tr>

      <tr><td><input type="submit" name="Nom" value="Envoyer"></td>
      <td><input type="reset" name="Nom" value="Annuler"></td></tr>
      </table>
    </form>
  </body>
</html>

Voici le code du script traitement.php :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Traitement des données envoyées par formulaire</title>
  </head>
  <body>
  <?php
    $prenom = $_POST["prenom"];
    $nom = $_POST["nom"];
    $motDePasse = $_POST["mdp"];
    $age = $_POST["age"];
    $obs = $_POST["observations"];

    echo "<b>Données reçues :</b><br><br>";
    echo "Prénom : $prenom<br>";
    echo "Nom : $nom<br>";
    echo "Mot de passe : $motDePasse<br>";
    echo "Age : $age<br>";
    echo "Observations : $obs<br>";
    ?>
  </body>
</html>

Exécutons ce code dans WAMP Server. Nous entrons un prénom, un nom et un mot de passe. Nous sélectionnons une tranche d’âge et nous insérons quelques mots dans le textarea. Un clic sur le bouton Envoyer et les données sont transmises au programme traitement.php et affichées à l’aide d’instructions echo.

Pour éviter les problèmes d’injection de type Cross-Site Scripting, pensez à convertir les données entrées par l’utilisateur en appliquant (systématiquement !) la fonction htmlspecialchars() à chacune des données récupérées. Le code du script traitement.php devient alors le suivant :

<?php
  $prenom = htmlspecialchars($_POST["prenom"]);
  $nom = htmlspecialchars($_POST["nom"]);
  $motDePasse = htmlspecialchars($_POST["mdp"]);
  $age = htmlspecialchars($_POST["age"]);
  $obs = htmlspecialchars($_POST["observations"]);

  echo "<b>Données reçues :</b><br><br>";
  echo "Prénom : $prenom<br>";
  echo "Nom : $nom<br>";
  echo "Mot de passe : $motDePasse<br>";
  echo "Age : $age<br>";
  echo "Observations : $obs<br>";
?>

Comme il a été dit dans la rubrique précédente, il est tout à fait possible d’ajouter un article depuis le tableau de bord de WordPress en utilisant le module Press-Minute. Les possibilités offertes par ce module sont des plus limitées et je suis sûr que vous préférerez utiliser la fonctionnalité Articles de WordPress.

Sous Tableau de bord, cliquez sur Articles, puis sur Ajouter. Cette action lance l’éditeur d’articles de WordPress.

Deux modes de visualisation sont possibles :

  • Sélectionnez l’onglet Visuel pour afficher les articles tels qu’ils apparaîtront sur votre blog.
  • Sélectionnez l’onglet Texte pour afficher le code HTML correspondant.

Définissez le titre de l’article et entrez un peu de texte.

L’onglet Visuel étant sélectionné, vous pouvez jouer avec les icônes de la barre d’outils. Ici par exemple :

  • Nous appliquons les attributs gras et italique au mot WordPress ;
  • Nous définissons une liste à puces ;
  • Et un lien qui pointe vers le moteur de recherche Google. Nous définissons l’adresse URL du lien, nous affectons un titre au lien et nous demandons son ouverture dans une nouvelle fenêtre ou un nouvel onglet du navigateur. Vous pouvez également cliquer sur Ou alors, faites un lien vers l’un des contenus de votre site. Choisissez alors un article ou une page dans la liste ou en lançant une recherche sur votre blog. Quel que soit le type du lien retenu, cliquez sur Ajouter un lien pour l’insérer dans l’article.

Examinons les autres icônes de la barre d’outils :

  • L’icône Bloc de citation permet de mettre le texte sélectionné en retrait afin de le démarquer du reste de l’article.
  • Les icônes Aligner à gauche, Centrer et Aligner à droite permettent de modifier l’alignement du texte sélectionné.
  • L’icône Défaire un lien permet de supprimer un lien précédemment mis en place avec l’icône Insérer/Modifier un lien.
  • L’icône Insérer la balise More limite l’article aux lignes qui précède cette balise. Les personnes qui visualisent l’article peuvent alors cliquer sur cette balise pour accéder à la suite de l’article.
  • L’icône Correcteur d’orthographe vérifie l’orthographe de l’article. Si nécessaire, cliquez sur la flèche qui suit cette icône pour choisir la langue de vérification.
  • L’icône Basculer en mode Plein écran affiche une version agrandie de l’éditeur d’articles.
  • Enfin, l’icône Afficher/cacher les options avancées donne accès ou dissimule des icônes de mise en forme supplémentaires.

Si vous avez déjà utilisé un traitement de texte, vous n’aurez aucun mal à comprendre ces nouvelles icônes :

  • La liste déroulante Format donne accès à plusieurs mises en forme prédéfinies.
  • L’icône Souligner souligne le texte sélectionné.
  • L’icône Justifier aligne à droite et à gauche le bloc de texte sélectionné.
  • L’icône Sélectionner la couleur du texte permet de choisir la couleur du texte sélectionné, dans une palette réduite, ou dans un nuancier. Si nécessaire, vous pouvez entrer la couleur RVB à utiliser en remplissant la zone de texte Couleur. Ici par exemple, nous choisissons la couleur rouge en entrant #FF0000 dans cette zone de texte
  • L’icône Coller du texte simple permet de copier/coller du texte sans aucune mise en forme depuis une source externe. Par exemple, depuis un fichier texte écrit dans le Bloc-Notes de Windows.
  • L’icône Coller du texte Word permet de copier/coller du texte mis en forme depuis Word. De nombreux utilisateurs de WordPress (dont je fais partie) préfèrent écrire leurs articles dans Word, les mettre en forme et les copier/coller dans WordPress en utilisant cette icône. N’essayez pas de copier/coller un texte Word dans la zone de saisie de l’article : vous pourriez insérer des codes invisibles qui alourdiraient exagérément votre article.
  • L’icône Enlever la mise en forme supprime toute mise en forme sur le bloc de texte sélectionné.
  • L’icône Insérer un caractère particulier permet d’insérer un caractère difficilement accessible au clavier. Il suffit de cliquer sur un caractère dans la grille pour l’insérer dans l’article. Lorsque vous pointez un caractère, la partie droite de la boîte de dialogue vous propose deux autres possibilités pour l’afficher. Par exemple, si vous pointez le caractère Copyright, vous voyez qu’il est possible de l’insérer en tapant &copy; ou ©. Ces deux alternatives ne sont utilisables que sous l’onglet Texte de l’éditeur. Il suffit de taper ces deux codes sous l’onglet Texte. Lorsque vous basculez sur l’onglet Visuel pour prévisualiser le résultat, ils sont automatiquement convertis en le caractère Copyright.
  • Les icônes Désindenter et Indenter permettent respectivement de décaler vers la gauche et vers la droite le texte sélectionné.
  • L’icône Annuler annule la dernière frappe ou la dernière mise en forme.
  • Enfin, l’icône Rétablir annule la dernière utilisation de l’icône Annuler.

Bien qu’un peu rébarbative, cette énumération était nécessaire pour passer en revue de façon exhaustive toutes les possibilités de l’éditeur d’articles de WordPress.

Avant de terminer cette rubrique, jetons un œil à l’onglet Texte. Cet onglet vous semblera familier si vous êtes un adepte du langage HTML.

Les icônes de la barre d’outils facilitent la saisie des balises. A titre d’exemple, pour mettre un mot en gras, double-cliquez dessus et cliquez sur l’icône b. Les balises <strong> et </strong> sont insérées de part et d’autre de la sélection. Si vous basculez sur l’onglet Visuel, le mot apparaît en gras.

Si vous n’avez aucune idée de ce que signifient ces icônes, je vous rassure tout de suite : ce n’est qu’un plus offert aux programmeurs Web par WordPress. Vous pouvez très bien vous en passer !

Cliquez sur Publier et rendez-vous sur votre blog. Comme vous le voyez, votre article apparaît dans la partie supérieure de votre blog.

Si par la suite, vous décidez de modifier le contenu de l’article, rendez-vous dans l’interface d’administration, cliquez sur Articles, sur Tous les articles, pointez l’article à modifier et cliquez sur Modifier. Faites les modifications nécessaires et cliquez sur Mettre à jour.