Le potentiomètre rectiligne acquiert un octet, valeur comprise entre 0 et 255. La valeur est ensuite enregistrée sur un serveur pour usage ultérieur. Cette page
http://sin.nexgate.ch/slid/slid.html illustre le propos. L'enregistrement a lieu dans ce document texte
http://sin.nexgate.ch/slid/slid.txt. Le script met à contribution des codes html, css et javascript.
Un troisième script php cette fois est analysé plus bas.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>slider</title>
<style>
#pot {
left: -20px;
position: absolute;
top: 90px;
-webkit-transform: rotate(-90deg);
}
#info {
background-color: grey;
color:white;
font-family:verdana;
left: 12px;
position: absolute;
}
</style>
</head>
<body>
<p id="info">0</p>
<input type="range" max="255" value="0" id="pot">
<script>
document.getElementById("pot").addEventListener("mousemove", ind);
document.getElementById("pot").addEventListener("mouseup", send2php);
function send2php() {
window.location.href="./slid.php?byte=" + document.getElementById("pot").value;
}
function ind() {
document.getElementById('info').innerHTML = document.getElementById('pot').value;
}
</script>
</body>
</html>
Deux éléments HTML visibles
L'élément <body> déclare deux éléments visibles sur la page web :
- L'indicateur de valeur obtenu avec l'élément <p> affichant 0 au chargement de la page et identifié avec l'attribut id="info"'
- Le potentiomètre obtenu avec la déclaration <input> et les attributs :
- type="range" définit la forme : potentiomètre
- max="255" est la valeur correspondant au curseur en butée haute
- value="0" force la position du curseur au chargement de la page en butée basse
- id="pot" identifie l'élément, le potentiomètre
Javascript
L'élément <script> déclare le comportement des éléments HTML, l'un vis-à-vis de l'autre.
- A la ligne 26, on associe à l'élément identifié "pot", la fonction nommée ind() et détaillée quelques lignes en-dessous. Celle-ci sera exécutée lorsque le pointeur de souris (mouse) se déplacera (move) sur le potentiomètre.
- A la ligne 27, c'est la fonction send2php() qui sera exécutée mais à l'instant où le bouton de la souris sera relâché (mouseup).
- La fonction ind() en ligne 31 ne comporte qu'une seule instruction en ligne 32. Celle-ci affecte à l'intérieur (inner) de l'élément <p> soit entre ses balises <p> et </p>, la valeur, value, de la position du curseur, "pot".
- L'unique instruction de la fonction send2php() en ligne 29 consiste à ouvrir la page web nommée slid.php (située dans le même répertoire) à laquelle on acolle la chaîne de caractères "?byte=" suivi de la valeur du curseur. Dans le cas où le curseur serait tout en haut, la requête HTTP serait : slid.php?byte=255. Il s'agit alors de passer le paramètre nommé byte de valeur 255 au script php selon la méthode GET c'est à dire à la suite de l'URL de la page appelée.
CSS
Il s'agit des lignes intégrées à l'élément <style>. La ligne 11 oriente le potentiomètre verticalement et le dirige de façon à ce que son curseur en bas corresponde à sa valeur 0. Cette ligne est compatible avec le navigateur Chrome.
Les autres lignes disposent le potentiomètre et l'indicateur aux endroits désirés sur la page web et déterminent les couleurs de l'indicateur.
PHP
<?php
$file = fopen("slid.txt", "w");
fwrite($file, $_GET['byte']);
fclose($file);
header("location:javascript://history.go(-1)");
?>
Le script est enregistré dans le fichier nommé
slid.php et est appelé par la page
slid.html. Sa fonction est d'enregistrer dans le fichier texte nommé
slid.txt, la valeur du paramètre nommé
byte qui lui est passé à la suite de son URL (méthode GET). Exemple, la ligne entrée dans le champ adresse du navigateur :
slid.php?byte=200 enregistrera 200 dans le fichier
slid.txt. Faites l'essai !
- La ligne 1 déclare que le code qui suit jusqu'à la ligne ?> obéit à la syntaxe du langage php.
- La ligne 2 déclare l'ouverture du fichier texte en mode - w - c'est à dire en écriture. Selon le mode w, si le fichier contenait déjà une valeur, elle serait effacée lors de la nouvelle écriture ou si le fichier n'existait pas, il serait créé.
- Le ligne 3 réalise 2 opérations
- Lecture du paramètre byte selon la méthode GET avec $_GET['byte']
- Ecriture du paramètre dans le fichier slid.txt
- La ligne 4 ferme le fichier.
- La ligne 5, indique au navigateur d'afficher sa page antérieure. C'est la page appelante !
Cette page php est donc discrète car à peine appelée, la page appelante s'affiche de nouveau et ceci très rapidement ce qui rend l'exécution du script php invisible même.
