Étape 5: Rendre l’interface
On peut maintenant contrôler notre Pi de framboise avec des scripts PHP simples mais il n’y a aucune interaction avec l’utilisateur et ainsi nous ne pouvons pas choisir le voyant marche/arrêt. Nous allons rendre l’interface !
Il est composé de photos que j’ai trouvé sur Google images (recherche de « bouton marche/arrêt »). On était vert et l’autre un rouge, je viens d’ajouter le numéro à l’aide de The Gimp. Chaque bouton/image correspond à sa LED, donc si vous cliquez sur l’une d'entre elles, la LED correspondante va être activée/désactivé et l’image sera remplacée par sa version vert/rouge. Squelette de la page se fera avec le HTML, les interactions de serveur et de génération de la page avec PHP et au dernier JavaScript pour gérer les interactions avec l’utilisateur et l’animation de la page. Si vous ne savez pas, JavaScript est un langage de côté client et contrairement à PHP, il est exécuté pas une fois, mais en permanence par votre navigateur. C’est pourquoi vous pouvez changer l’apparence de la page sans recharger ou en y accédant à un autre. Si vous vous demandez pourquoi j’ai parlé de CSS avant, c’est juste parce que nous en avons besoin pour certains style et mise en page comme le le fond noir. Je n’ai pas un fichier .css complet parce qu’il n’était pas nécessaire ici.
Nous devons tout d’abord un fichier "index.php" (extension est .php et non .html cause nous allons utiliser le code PHP, il permet au serveur de savoir s’il y a PHP à exécuter avant d’envoyer la page générée). Cette page est la page d’accueil contenant les 8 boutons. Ces boutons sont d’abord générées avec un "exec (« gpio lire ». $i, $output);" dans une boucle for. Ensuite, nous avons besoin de détecter si l’utilisateur est en cliquant sur l’un de ces boutons. C’est là le code JavaScript est utile, je l’ai mis dans un fichier séparé appelé «script.js» mais il est toujours inclus dans index.php. Le script ajoute simplement un écouteur d’événements à tous les huit boutons et chaque fois que l’un d'entre eux est pressé, il utilise une fonction qui est demander gpio.php, recevant la réponse puis retourner. Enfin, en fonction de cela, le JavaScript change le bouton rouge (pour OFF) ou vert (pour ON). Maintenant, la dernière page : gpio.php. Il contient le code PHP pour activer/désactiver les LEDs en fonction de ce que la fonction JavaScript envoyée. L’utilisateur ne devrait pas normalement poser pour cette page précise mais il y a une règle d’or lors de la création de sites Web et il faut toujours retenir celui-ci: "Jamais confiance à l’utilisateur". En d’autres termes, ne pense jamais que l’utilisateur va toujours faire ce que vous pensez qu’il va faire. Ainsi, j’ai ajouté quelques titres au debut du code PHP comme en s’assurant que l’utilisateur a donné une valeur correcte et non une lettre comme exemple. J’ai fait un petit schéma pour résumer tout ce texte.
Vous pouvez télécharger le projet complet directement sur ce site ci-dessous.
