Introduction

Ce guide a pour vocation d’être le moins technique possible pour expliquer comment fonctionne le site du CAF Meythet et pour préparer peut-être un futur webmaster.
A la base on utilise WordPress qui est un CMS (système de gestion de contenu). L’hébergeur de notre site est ovh (OVHCloud).

Notion de thème WordPress

Un thème WordPress est un ensemble de fichier qui détermine l’apparence et le fonctionnement d’un site. Le CAF Meythet utilise le thème evolve et donc le dossier evolve

https://cafmeythet.org/wp/wp-content/themes/evolve

Donc tous les programmes php pour le calendrier sont situés dans ce dossier ainsi que les données (images, fichiers, icones). Ces données sont dans deux dossiers principaux

https://cafmeythet.org/wp/wp-content/themes/evolve/CAF
https://cafmeythet.org/wp/wp-content/themes/evolve/CAF-DATA

Le langage informatique utilisé : php

php (Hypertext Preprocessor) est le langage utilisé pour construire WordPress. Facebook et Wikipedia sont également créé en php.
C’est un langage orienté objet qui dispose de nombreuses fonctions de base. Pour des raisons de faille de sécurité il est impératif d’utiliser une version supérieure à 8.1 – les versions 7.x ne sont plus maintenues.

C’est le langage idéal pour produire des pages Web dynamiques tel que le calendrier.

Java script

Le php est majoritairement utilisé puisqu’il génère les échanges avec un serveur mais pour tout ce qui se passe en local sur le poste client (c.a.d vous), le java script est utilisé. La déclaration du code java script se fait en utilisant les bannières <SCRIPT> code java script </SCRIPT>. Un bon exemple est le diaporama du calendrier qui est écrit en java script.

Relation entre une application Web et une page WordPress

L’adresse internet ou URL de lancement d’une application Web tel que le calendrier se fait après publication d’une page WordPress qui ne contient que le titre et un modèle de page.

Ce modèle de page est définit par une séquence clé Template Name: qui doit être dans le source php du programme qui lui même doit être transféré dans le dossier du thème actif.

<?php
/*
Template Name: TESTCALENDRIER
*/

Avec l’exemple du début de source php d’un programme php (ci-dessus) le modèle de page définit est TESTCALENDRIER

Ainsi lorsque la page de titre TestCalendrier qui aura comme modèle TESTCALENDRIER est publiée, l’adresse ou URL de lancement de l’application correspondante est :

https://cafmeythet.org/wp/testcalendrier/

Mise à jour de WordPress et de ses composants

WordPress ait mis à jour régulièrement. D’autres composants comme les extensions et thème doivent également être mis à jour (amélioration, suppression de faille de sécurité).
WordPress est écrit en php comme le calendrier et le logiciel php doit également être mis à jour.

Le site hébergé chez ovh utilise jusqu’à présent la version php 7.4 alors que WordPress recommande au minima la version 8.3 non supportée par une ancienne version d’evolve.

Lorsque le thème evolve est mis à jour le dossier evolve est vidé (perte des programmes et données), ce qui a produit le problème du 26 novembre 2025.

Pour éviter l’effacement des programmes et des données une technique existe qui consiste à cloner le theme evolve par un theme enfant evolve-caf

Construction du thème enfant evolve-caf

Etape 1 : créer le dossier evolve-caf dans le dossier themes en utilisant ftp

Etape 2 : créer le fichier style.css qui va préciser le nom du thème enfant et celui du thème parent

style.css n’est pas un fichier css comme celui qui a le même nom dans le thème parent evolve.
Deux mots clés sont obligatoires
Theme Name: qui précise le nom du theme enfant
Template: qui précise le nom du thème parent
Le “:” accolé fait partie du mot-clé. Le fichier est créé avec l’éditeur de source Sublime Text puis est téléchargé par ftp.

Etape 3 : créer le fichier function.php qui va permettre d’ajouter le fichier css style.css du parent evolve

Pour ajouter des styles css personnalisés, une autre fonction pourra être ajouté à ce fichier php. Les styles personnalisés sont actuellement dans le fichier php d’un programme (exemple calendrier.php)

Etape 4 : activation du style enfant

Le fait d’ajouter le fichier style.css a été reconnu par WordPress qui a ajouté le thème evolve-caf aux thèmes existants.

En sélectionnant le thème evolve-caf un bouton permet de l’activer.

A partir de cette activation tous les fichiers situés dans le theme enfant evolve-caf seront prioritaires sur ceux de même nom du thème parent evolve.

Le site utilisera les programmes php personnalisés du CAF Meythet de evolve-caf et ceux propres aux thème evolve du thème parent.

En cas de mise à jour du thème evolve le thème enfant ne sera pas modifié.

Emplacement des dossiers et fichier

Les dossiers CAF et CAF-DATA devront être déplacés du dossier evolve vers le dossier evolve-caf

Le paramétrage des chemins d’accès et des URL correspondant devra être adapté.

Installation du composer et de phpspreadsheet

Le calendrier et le bloc-notes utilise quelquefois des fichiers Excel de type xlsx. (Fichier Excel mutli-feuilles). Pour gérer ces fichiers en lecture ou écriture, il est nécessaire de disposer d’un ensemble de fonctions du package phpspreadsheet. Le chargement et l’installation du package phpspreadsheet nécessite l’installation d’un composant qui est le composer php.

Installation du composer

Il est nécessaire de charger le package sur le thème enfant par la commande php en se mettant en mode terminal unix. La commande ssh://cafmeyth-mic@ssh.cluster103.hosting.ovh.net:22/ permet de se connecter en mode terminal en utilisant par exemple putTTY

php -r “copy(‘https://getcomposer.org/installer’, ‘composer-setup.php’);”

Installer ensuite composer.phar par la commande

php composer-setup.php

Installation du package phpspreadsheet qui permet le traitement lecture/écriture des fichiers Excel

Elle se fait en utilisant la commande suivante en mode terminal unix

php composer.phar require phpoffice/phpspreadsheet

Intégration de phpspreadsheet dans le source php des applications

Il est nécessaire d’incorporer au source php ces deux instructions

Apparence des objets sur l’écran par du CSS

CSS signifie Feuilles de Style en Cascade (Cascading Style Sheet en anglais) qui permet de définir la police utilisée, la dimension des blocs, leur couleur, leur taille, la police etc …

La définition des styles peut être ajouté dans le source du programme php mais hors php entre les bannières <STYLE> et </STYLE>

Elles peuvent être dans un fichier source .css qui complètent les définitions sources du thème (evolve) qui sont dans le source style.css

Ainsi une définition d’un style peut être défini dans style.css du thème evolve, puis complétée par le source css utilisateur (cafmeythet.css par exemple) puis complétée par les définitions qui sont entre les bannières <STYLE> et </STYLE>. C’est pour cela que l’on parle de Cascading ou “en cascade”.

Pour définir le fichier css utilisateur on utilise une nouvelle fois le fichier functions.php déjà utilisé pour le thème enfant.

Ci-dessus on voit que l’on ajoute au thème enfant evolve-caf, les définitions du fichier style.css du thème parent ( get_template_directory_uri() ) puis en cascade les définitions du fichier cafmeythet.css du thème enfant evovle_caf ( get_stylesheet_directory_uri() )

La fonction add_action va alors lancer automatiquement les deux feuilles de style css chaque fois qu’une application (page) du thème sera activée.

Pour mettre au point cafmeythet.css et ne pas tomber dans le piège des données en cache des navigateurs, on utilise une astuce consistant à ajouter la date et heure au nom du fichier css, par exemple cafmeythet_20251215_1800.css – à chaque modification des styles css, on mettra à jour la date et heure du fichier css et son nom dans functions.php.

Les applications web du site du CAF Meythet

La plus connue est le CALENDRIER mais il y en a plusieurs autres :

• CALENDRIER : calendrier des activités
• BLOC-NOTES : saisie des activités, statistiques des sorties, gestion du matériel et des documents
• ABONNEMENT : inscription à des types d’activité
• CADRES : trombinoscope des encadrants
• INSCRIPTION : inscription à l’escalade
• TESTCALENDRIER : pour mise au point du calendrier
• TESTBLOC-NOTES : pour mise au point du bloc-notes
• TESTWP : application du webmaster

Base de données

En plus de la base de données propre à WordPress, une seconde base de données MySQL est utilisées par les applications Web.

Un certain nombre de tables sont utilisées par les applications en ligne et un nombre équivalent pour les applications de test.

Par exemple la table cal_activ qui contient l’ensemble des données des activités est cloné par l’application du webmaster sur la table test_activ pour l’application de test TESTCALENDRIER

Les outils nécessaires

Editeur de code

L’éditeur de source Sublim Texte est indispensable pour coder des langages tel que le php, le java script ou le css.

La mise en couleur des lignes évite la plupart des erreurs

Client ftp

Le client ftp FileZilla qui permet de publier et de modifier les applications ainsi que des fichiers.

Les outils proposés par ovh

Un hébergeur tel que ovh ou Lws fournissent un ensemble d’outils dont on peut citer :

Un accès à phpMyAdmin qui permet de faire des requêtes sql sur la base de données

Une vision des mails envoyés par le calendrier ainsi que des rapports d’erreurs

Un accès en terminal Unix sur les dossiers de WordPress

Une sauvegarde automatique des bases de données.

Principe de fonctionnement des applications web

C’est le principe QUESTION/REPONSE entre un CLIENT (un adhérent ou un encadrant à travers son mobile ou PC) et un SERVEUR (le gros ordinateur unix avec les bases de données chez ovh).

Les questions et les réponses sont acheminées à travers le réseau internet. Elles sont envoyées selon un protocole html et cryptées avec des clés SSL pour la sécurité du système.

La façon utilisée pour poser une question au serveur se fait à travers des formulaires HTML qui utilisent la méthode POST

En exemple

<form method="post">
<input type="submit" name="commande" value="PARTICIPER">
<input type="hidden" name="licence" value="749620250001">
<input type="hidden" name="activite" value="Ski de randonnée">
</form>

qui se traduira sur votre écran par le bouton PARTICIPER

Ainsi lorsque le bouton PARTICIPER sera utilisé, le serveur reçoit les trois paramètres commande, licence, activite avec leurs valeurs respectives.

Le client arrête son activité et se met en attente d’une réponse du serveur.
Le serveur exécute la commande et envoi au client une réponse sous forme d’une liste de paramètres avec leur valeur respective.

L’arrivée de la réponse réveille le client qui réceptionne chaque paramètre par une commande $_POST

$valeur = $_POST['nom du paramètre'];

Par exemple

$commande = $_POST['commande'];
$licence  = $_POST['licence'];

Après interprétation des paramètres reçus, le client affiche une réponse sur l’écran jusqu’au prochain formulaire <form> et ainsi de suite.

Principe de fonctionnement de la base de données

Il y a deux bases de données, une utilisée principalement par WordPress et une qui est utilisée uniquement par nos applications web.

Une base de données est composée de tables et on pourrait faire une comparaison entre base & table et entre dossier & fichier
Les tables sont structurées en colonne de type différent (numérique, texte, date, etc) et les commandes d’accès font référence aux noms des colonnes de la table, un peu comme pour un fichier Excel.

L’accès aux données se fait via des requêtes SQL (Structured Query Language) qui permettent de lire (SELECT), de mettre à jour (UPDATE), d’insérer une ligne (INSERT) ou de supprimer une ligne (DELETE).

Par exemple pour lire la table des adhérents et extraire toutes les données correspondant à la licence 749620240001 (c’est un exemple), la requête SQL correspondante est

SELECT * FROM cal_adherent WHERE id = '749620240001'

Le caractère * signifie que la réponse contiendra les données de toutes les colonnes.

Pour récupérer uniquement le prénom et le nom d’un licencié, la requête SQL est

SELECT prenom, nom FROM cal_adherent WHERE id = '749620240001'

Des caractères spéciaux comme le % peuvent remplacer un caractères ou un ensemble de caractères. Ainsi la requête

SELECT * FROM cal_adherent WHERE id LIKE '74962024%%'

va remonter toutes les données des licenciés du CAF Meythet (7496) qui ont pris leur première licence dans la saison 2023-2024 et qui ont 74962024 en début de licence
Comme pour les paramètres identifiés et reçus par la commande $_POST, les réponses aux requêtes SQL exécutées sur le serveur sont récupérées par l’objet “base de données”. Les données reçues sont dans un tableau de structures de 0 à n-1 pour n lignes.

L’exploitation de toutes les occurrences de ce tableau se fait alors par l’instruction

foreach $tableau as $ligne
{
   traitement ligne 0, 1, 2 ...,  n-1
}

css, ça sert à quoi et comment ça marche ?

Ce sont les navigateurs qui interprètent les commandes css. Certains navigateurs peuvent faire des erreurs d’interprétation.

Si on reprend le bouton PARTICIPER ci-dessus, c’est du code css qui donne cette présentation du bouton avec une forme arrondie, une couleur bleu, les lettres en blanc.

<STYLE>
input[type=submit],
button[type=submit] {
  background:#00A6D0 !important; /* bleu priorité absolue */
  border-radius: 5px !important; /* Force un faible arrondi */
    -webkit-border-radius: 5px !important; /* Compatibilité anciens navigateurs */
    -moz-border-radius: 5px !important;
  margin: 1px;
  border:none !important;
}
</STYLE>

Il est possible de modifier un style css en ajoutant une surcouche ou en mettant le code css en ligne. Par exemple si l’on veut un bouton vert pour ce bouton PARTICIPER on code le css directement dans le input

<input type="submit" name="commande" value="PARTICIPER" style="background:green !important";>

ce qui va donner le résultat attendu. Les autres éléments de la forme sont conservés (léger arrondi des angles) et il y a juste la couleur de fond qui a été modifiée.

Le code css peut être très compliqué. Pour le cas de nos applications web il n’est pas trop difficile à comprendre.

Différence entre la programmation php et javascript

Tout ce qui est programmé en php est exécuté sur le serveur hébergé chez ovh qui a de la puissance puissance et beaucoup de mémoire. Par exemple de sélectionner toutes les activités pédestres à réaliser et dont l’encadrant se nomme intel.

Au contraire, avec le javascript l’action se passe sur le poste client par le biais du navigateur. Il y a plusieurs méthodes pour faire communiquer les informations entre le code php et le code javascript.

Un bon exemple pour comprendre est l’action commandée par le bouton Mot de passe en clair des menus de connexion. Si sur le calendrier il est en bleu clair avec les angles arrondis, c’est grâce à du code css.

En php on déclare un formulaire de type “password” qui remplace chaque caractère du mot de passe par une étoile. Lorsque le bouton de connexion est utilisée, c’est sur le serveur que le mot de passe est vérifié. Lorsque le mot de passe saisi comporte une erreur (caractère en plus ou en moins, minuscule au lieu de majuscule, etc …) le bouton Mot de passe en clair affiche sur l’écran le mot de passe afin qu’il puisse être corrigé.

Voila le code php du formulaire de saisie du mot de passe

<input type="password" id="pwd" size="8" name="pass">

Ainsi qu’en php le codage du bouton Mot de passe en clair

<button type="button" onclick="togglePassword()">Mot de passe en clair</button>

et à présent le code javascript de la fonction togglePassword() qui est appelée sur un click de ce bouton.

<SCRIPT>
function togglePassword() {
    const pwdField = document.getElementById("pwd");
    // Alterne entre 'password' et 'text'
    if (pwdField.type === "password") {
        pwdField.type = "text";
    } else {
        pwdField.type = "password";
    }
}
</SCRIPT>

1-le getElementById va retrouver le formulaire php qui comporte l’id=”pwd” et charger la variable pwdField avec le contenu du formulaire

2-on compare le type de cette variable initialisé par le php en type password

3-s’il est du type password on le transforme en type text (caractères visibles)

4-si au contraire il est du type text on le remet en type password (des étoiles)

C’est le navigateur (Firefox par exemple) de votre PC ou smartphone qui interprète ce code.

Et la suite …

Il est difficile d’en écrire plus sur le sujet sans rentrer dans la technique pure de programmation.

Si cela intéresse quelqu’un qui a déjà des bases d’informatique et une connaissance des langages objet comme le C++ ou le java, je serais heureux de partager le code et la méthode utilisés.

Les sources php et css

L’ensemble des sources php et css sont disponibles dans ce fichier compressé phpcss

Pour visualiser un de ces sources, je vous conseille d’utiliser l’éditeur de code SublimText qui est disponible dans une version gratuite.

Michel Brusa

Images liées: