L'état du bouton (0, 1) est enregistré sur le serveur web distant. Cette page web est accessible ici : http://sin.nexgate.ch/btn/but1.php et l'état est enregistré ici http://sin.nexgate.ch/btn/btn.txt. Cet enregistrement sera utilisé ultérieurement pour commander ce qu'on voudra et fera l'objet d'un autre billet.
Deux fichiers-images sont nécessaires. Ce sont ici les fichiers swon.jpg et swoff.jpg correspondant aux états ON ou OFF du bouton.
<DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle</title>
</head>
<body>
<?php
$file = fopen("btn.txt", "w");
$but=$_GET["st"];
if ($but=="on") {
$but="off";
$src="./swoff.jpg";
fwrite($file, "0");
}
else {
$but="on";
$src="./swon.jpg";
fwrite($file, "1");
}
fclose($file);
?>
<img src="<?php echo $src ?>" width="100" onClick="window.location.href='./but1.php?st=<?php echo $but?>'">
</body>
</html>
Lecture du code
Le code html est très simple car il n'intègre dans sa partie visible, <body>, qu'une seule balise <img> qui déclare l'image du bouton changeant selon son état. C'est ce que le code php doit réaliser.En ligne 4 : Les attributs de la balise html <meta> permettent l'affichage responsive et donc adapté aux différents écrans dont les smartphones et tablettes.
Le code php est imbriqué au code html en trois endroits.
Premier code php
- Le premier code php, en ligne 9, ouvre en écriture avec l'option w, le fichier nommé btn.txt. Le choix du format texte est réfléchi car il facilitera par la suite l'extraction des données enregistrées. L'accès avec l'option w efface les données antérieures s'il y en avait, au moment de l'écriture. Si le fichier n'existe pas, il sera créé à cette occasion.
- En ligne 10, on enregistre le paramètre passé au fichier but1.php dans la variable php $but. Par exemple la requête but1.php?st=on affectera $but de la valeur on. Le paramètre st représente l'état du bouton avant l'appel de la page web.
- Ligne 11, on interroge la variable $but : le paramètre est-il égal à on ?
- S'il égale on alors, lignes 12, 13 et 14 :
- On change la valeur de $but par off.
- La variable $src est affectée de la chaîne de caractères swoff.jpg. C'est le nom du fichier-image à afficher plus bas. Image du bouton en position OFF.
- On écrit 0 dans le fichier btn.txt
- Si st égale off - lignes 17 à 19 - lecture similaire.
- Ligne 21 : fermeture du fichier texte car l'écriture est terminée.
Second code php
- Ce script php apparaît en ligne 23 et détermine l'image à afficher.
- Imbriqué dans l'élément <img>, il s'agit de définir quelle image affecter à cette balise.
- Dans le cas où $src égale swoff.jpg, ce code php <?php echo $src ?> doit se lire swoff.jpg en code html.
- La ligne de code html devient donc <img src="swoff.jpg"... ce qui est conforme à la syntaxe de la balise html.
Troisième code php
- Ce code est également inclus dans la balise <img> et relance la page php quand l'image du bouton est cliquée.
- Le second attribut est onClick="window.location.href='./but1.php?st=<?php echo $but?>'"
- Toujours dans le cas de l'affichage de l'image swoff.jpg où $but égale off, en remplaçant le script php par sa traduction html, on peut lire onClick="window.location.href='./but1.php?st=off'"
- Ce second attribut onClick="window.location.href='./but1.php?st=off'" lance la requête d'URL but1.php?st=off c'est à dire que la page web but1.php est relancée mais avec cette fois le paramètre st égal à off.
C'est alors le bouton en position ON qui sera affiché sur la page web but1.php
Super tutoriel ! De bonnes bases pour apprendre le php ! Merci beaucoup pour avoir résolu mon problème.
RépondreSupprimer