Passer une variable de PHP à JavaScript

La méthode la plus simple consiste à afficher grâce à PHP la valeur de la variable directement dans le code JavaScript. Il s'agit de la méthode la plus directe. La fonction json_encode permet alors d'éviter des injections avec par exemple du code malveillant inséré depuis PHP. Il peut également être difficile de se retrouver dans son code quand on insère des données structurées (JSON, HTML) et parce que les deux langages sont mélangés.

Exemple :

<script>
             var variableRecuperee = <?php echo json_encode($variableAPasser); ?>;
            </script>

La méthode suivante consiste à afficher la variable PHP dans le HTML. Par exemple, dans un <input /> caché ou dans une <div> puis dans le code JavaScript servant à récupérer la valeur en utilisant le DOM. Avec cette méthode, l'exécution du code est très rapide en JavaScript, car les opérations faites avec le DOM sont courtes. Cette méthode oblige cependant le code à être valide en HTML pour que cela fonctionne, sinon il faut échapper ou encoder les caractères posant problème.  
Le code HTML est aussi plus long en conséquence.

 

Exemple :

            <input type=hidden id=variableAPasser value=<?php eco $variableAPasser; ?>/>
            //JavaScript
            var variableRecuperee = document.getElementById(variableAPasser).value;

Une autre solution est d'utiliser AJAX. Le code JavaScript va envoyer une requête AJAX à un script PHP qui affichera la valeur. Grâce à l'événement onLoad qui est appelé lors du chargement du script PHP, on peut récupérer la valeur dans le code JavaScript. C'est la méthode la plus propre, car les langages sont alors bien séparés. Elle permet également de charger plus vite la page, car l'appel du script PHP peut être effectué dans un deuxième temps (par exemple, lors d'un clic sur un bouton). Le code écrit est par contre plus difficile à comprendre pour un débutant, et cela génère plus de latence dans la page (le code doit attendre que le JavaScript ait appelé la fonction PHP).

Exemple :

//Fichier PHP script.php
            <?php
            echo $variableAPasser;
            ?>
            //Code JavaScript
            var requete = new XMLHttpRequest();
            requete.onload = function() {
             //La variable à passer est alors contenue dans l'objet response et l'attribut responseText.
             var variableARecuperee = this.responseText;
            };
            requete.open(get, script.php, true); //True pour que l'exécution du script continue pendant le chargement, false pour attendre.
            requete.send();

La dernière méthode consiste à utiliser les cookies. PHP et JavaScript ont tous deux des méthodes pour créer et lire des cookies. La méthode est rapide et facile à mettre en place en PHP, mais demande un petit peu plus de traitement en JavaScript. Les deux langages sont bien séparés également avec cette méthode.

Exemple :

//PHP
            setcookie(MonCookie, $variableAPasser);
            //JavaScript
            //Ce bout de code permet de trier les cookies pour les stocker dans un tableau associatif.
            var cookies = document.cookie.split(;).
            map(function(el){ return el.split(=); }).
            reduce(function(prev,cur){ prev[cur[0]] = cur[1];return prev },{});
            //Récupération de la variable dans le tableau
            var variableRecuperee = cookies[MonCookie];

Passer une variable JavaScript à PHP

JavaScript est le langage côté client et PHP est le langage de script côté serveur. Dans ce tutoriel nous allons découvrir comment passer une variable de JavaScript à PHP via une requête HTTP.

Vous pouvez créer une URL de manière dynamique via JavaScript et l'envoyer au serveur via un appel AJAX (comme la méthode .ajax de jQuery) ou via quelque chose comme JavaScript.location.href = URL;  

Dans cette URL, vous aurez les données que vous souhaitez envoyer à PHP. Vous trouverez ci-dessous un exemple de fonction JavaScript pouvant être appelée en appuyant sur un bouton.

<?php
              function add() {
                var a = 1;
                var b = 2;
                window.location.href = "add.php?var1=" + a + "&var2=" + b;
              }
            ?>
            

Dans cette fonction ci-dessus, nous avons deux variables JavaScript dans l'URL. Nous disons ensuite à « window » d'accéder à la page « add.php » avec les deux paramètres « var1 » et « var2 » qui contient les données. Ici, nous passons deux variables de JavaScript à PHP. Le navigateur accéderait alors à l'URL http://www.exemple.com/add.php?var1=1&var2=2.

Réception et traitement des variables en PHP

Maintenant que JavaScript a émis la requête et passé certains paramètres, PHP peut récupérer les données dans le tableau $_GET.

<?php
              function add() {
                 // Vérifiez si les paramètres var1 et var2 sont transmis au script via l'URL
                 if (isset($_GET["var1"]) && isset($_GET["var2"])) {
                  $somme = $_GET["var1"] + $_GET["var2"];
                  echo $_GET["var1"]." + ".$_GET["var2"]." = ".$somme;
                 }
              }
            ?>
            

Ce code afficherait alors la somme des deux variables envoyé depuis le code JavaScript :

Sortie :

1 + 2 = 3

Vous pouvez vérifier la validité du balisage des pages HTML ici >  https://validator.w3.org/

Visitez le site https://alvarotrigo.com/blog/10-cool-css-animations-to-add-to-your-website/

Vous désirez vous former et devenir autonome. Voici une formation HTML5 avec laquelle vous apprendrez à concevoir des sites web optimisés et performants; à savoir, structurer vos contenus, ajouter des images, des vidéos, concevoir des tableaux et des formulaires dans vos pages.

 

Pour accéder à la formation c’est ici > https://ronan-hello.fr/series/html

Optimiser la description de la page

 

Pour chaque page Web (page d'accueil, sous-page, etc.), il est possible d'ajouter une courte description des contenus de la page Web. Cette description de page est ajoutée en tant que balise méta dans le code HTML et n'apparaît pas sur la page Web.

Les moteurs de recherche affichent la description de la page dans leurs résultats de recherche (directement sous le titre de la page). Quand une page Web ne possède pas de description, c'est généralement le texte de la page Web qui apparaît à la place.

Les mots-clés actuels apparaissent en gras dans les résultats de recherche. Idéalement, la description de la page devrait pour cette raison également contenir le mot-clé pour lequel la page Web est optimisée.Des descriptions de page bien entretenues pour le site Web et les sous-pages permettent un meilleur classement dans la liste des résultats des moteurs de recherche connus comme Google et Bing.

 

Voici les spécificités d'une description de page optimale

 

Une description doit contenir entre 140 et 180 caractères et résumer le thème de la page. Elle doit être rédigée de manière à attirer l'attention des visiteurs et les inciter à cliquer sur le lien.     La plupart du temps, la description est affichée avec le titre de la page. Pour cette raison, veillez à ce que le titre et la description de la page s'accordent bien.

Google affiche uniquement des descriptions de pages de haute qualité. Il est donc préférable que vous rédigiez des descriptions de page personnalisées pour chacune des sous-pages de votre site Web.

 

Modifier la description de la page dans MyWebsite Creator

 

Vous pouvez entretenir les descriptions de page directement et en toute simplicité dans votre éditeur MyWebsite Creator.

Modifier la description de la page de MyWebsite Creator

 

Modifier la description de la page dans WordPress

 

Pour WordPress, il est recommandé d'utiliser un plug-in qui simplifie l'entretien de descriptions de page :

• Yoast SEO (recommandé pour Managed WordPress)
• All in One SEO Pack

Installez l'un de ces plug-ins dans votre section d'administration WordPress et insérez les descriptions de page de la manière indiquée dans la description du plug-in.

 

Insérer la description de la page manuellement

Pour cela, insérez le code suivant dans la section <head> de chaque page :

 

				<meta content="Votre description" name="description" />

Changer avec Font-size

La solution la plus simple consiste à réduire la taille du texte d'origine à zéro, grâce à la propriété « font-size », et redéfinir à la valeur initiale la taille du contenu ajouté par le CSS, dans notre exemple "Bonjour tout le monde !".

voici le code:    

    .content {
                  font-size: 0;
                }
                .content::before {
                  content: "Bonjour tout le monde!";
                  font-size: initial;
                }
            

Changer le texte d'un bouton d'envoi

 

document.getElementById("monBoutonEnvoi").value="Nouveau texte";