11.2 Installation Wordpress
Vous devez choisir un hébergeur qui propose une solution LAMP (Linux + Apache + MySQL + PHP); si possible avec un Wordpress préconfiguré, c’est plus facile. Vous devrez aussi enrtegistrer un nom de domaine pour votre site, ainsi qu’un certificat pour pouvoir utiliser une adresse commençant par https://. Bien sûr, tout est plus facile si votre site est configuré sur les serveurs de votre institution par votre service informatique. Une fois cela réalisé, vous devrez installer et configurer quelques plugins Wordpress.
11.2.1 Plugins Wordpress
Les extensions suivantes sont à installer (les versions correspondent à la configuration de Wordpress au 05/01/2022 et sont toutes à jour à cette date) :
H5P 1.15.3. Il faut installer les libraires séparément et les principales ont été rajoutées dès le départ. Les 5 ou 6 widgets H5P que nous avions déjà créés sont facilement importés en les exportant de leur site original au format
.h5pen cliquant sur le boutonReuseen bas à gauche du widget. Ensuite dans Wordpress, on va dans le tableau de bord -> H5P Content, on cliqueAdd NewpuisTéléverseret on sélectionne le ficher.h5p. Une sauvegarde de ces fichiers.h5pest également effectué sur p-Cloud dans le dossiersdd_h5p_backup. Le plugin est ensuite configuré pour ne pas montrer la bannière H5P en bas des widgets et pour générer tous les événements xAPI possibles (voir 6).SNORDIAN’s H5PxAPIkatchu 0.4.11 capture les évènements xAPI générés par H5P et les stocke directement dans la base de données MySQL liée à Wordpress. Il y a une interface simpliste pour visualiser les tables, les filtrer et les exporter au format CSV. Nous avons patché cette version pour y rajouter l’enregistrement des évènements xAPI directement dans notre base de données MongoDB Atlas, et n’utiliser l’enregistrement local original que comme solution d’appoint au cas où l’enregistrement en MongoDB s’avère impossible pour une raison ou une autre (base saturée, indisponible, erreur, ou port 27017 de MongoDB bloqué). Attention : depuis la version 0.4.7, il faut activer l’option “Embed support”, sinon, les exercices H5P des pages bookdown ne sont pas enregistrées à partir de certains navigateur Web (testés avec la version 0.4.11 : Safari et Chrome sous MacOS Big Sur, Edge et Chrome sous Windows 10 et Chromium et Firefox sous Ubuntu 20.04LTS).
OAuth Single Sign On - SSO (OAuth Client) 6.21.6 configuré pour enregistrer et connecter un utilisateur via son compte Github. Pour permettre ceci une application Github nommée BioDataScience a été créée sur Github. La configuration de ce plugin est disponible depuis le tableau de bord de Wordpress -> miniOrange -> OAuth.
Import and export users and customers 1.19.1.2 permet d’exporter un tableau contenant tous les utilisateurs enregistrés dans Wordpress, accompagné des métadonnées. Ce tableau CSV est ensuite lu par la fonction
sdd_users()pour créer les informations utilisateurs accessibles par Posit Connect et les learnrs/apps Shiny exécutées directement dans la SciViews Box. Sa fonction d’importation des données permet de mettre à jour rapidement des données et métadonnées relatives à un grand nombre d’étudiants en une seule fois à partir d’un tableau CSV.Advanced iFrame Pro 2021.9 permet d’insérer un iframe avec plein d’options : sécurisation, adaptation de la taille, passage de paramètres, réécriture d’URL, etc. Nous utilisons ce plugin pour intégrer les bookdowns dans le site Wordpress, et ainsi conserver la bannière supérieure de notre site tout en affichant le bookdown. La version standard est installée depuis le site plugins Wordpress. Il vous faut cemendant activer la version PRO pour une some modique afin d’accéder à toutes les fonctionnalités requises. Pour la mise-à-jour, on télécharge la nouvelle version sous forme de fichier zippé depuis Evanto, on supprime l’ancienne version (config conservée), et on installe la nouvelle version en téléversant le fichier .zip. La configuration est telle qu’elle correspond au code suivant (qui peut être utilisé tel quel sans modifier par ailleurs quoi que ce soit dans les boites de dialogue) :
[advanced_iframe use_shortcode_attributes_only="true"
src="//www.tinywebgallery.com/blog/advanced-iframe"
width="100%" height="600" add_iframe_url_as_param="same"
show_iframe_loader="true" enable_responsive_iframe="true"
hide_elements=".tg-site-footer-bar,.entry-footer" additional_height="100"
multi_domain_enabled="false" use_post_message="false"]My Custom Functions 4.51 permet de rajouter des fonctions PHP au site sans devoir créer de plugin Wordpress pour cela et sans “polluer” les autres fichiers (comme
functions.phpdu thème). Les fonctions rajoutées créent des variables danslocalStoragedu browser web sur le client pour l’identification de l’étudiant entre bookdown, H5P et les applis Shiny/learnr, pour enregistrer les évènements H5P xAPI dans MongoDB Atlas via H5PxAPIkatchu, et pour modifier Wordpress de manière cosmétique (pas d’icône Wordpress dans la barre du haut, logo et lien BioDataScience dans la page de login).WP User Avatars 1.4.1 permet de gérer les avatars des utilisateurs. Nous l’employons pour placer les photos de chaque étudiant issues des données UMONS. Pour l’instant, nous devons vérifier chaque utilisateur manuellement et rajouter ces photos à la main… mais au moins, ce plugin permet de le faire.
UpdraftPlus 1.16.69 comme système de sauvegarde de l’ensemble (fichiers Wordpress + base MySQL). Le backup se fait en local pour l’instant dans
lamp0/web/vhosts/wp.sciviews.org/htdocs/wp-content/updraft, mais il est recopié manuellement par sFTP sur un disque de backup ou de toute autre manière qui vous convient.Quelques autres plugins ne sont pas essentiels, mais aident à gérer le site Wordpress : Broken Link Checker 1.11.16, Health Check & Troubleshooting 1.4.5, WP-Optimize 3.2.1, WP Rollback 1.7.1 & WordPress REST API Authentication 1.6.6.
Tous ces plugins sont distribués sur le site plugins de Wordpress, sont à jour et activement maintenus, avec un grand nombre d’utilisateurs. Nous avons évité les plugins plus “confidentiels” pour lesquels nous ne sommes pas certains de la pérennité à plus long terme. Note : en janvier 2022, nous avons recherché la compatibilité PHP 8.0 de ces plugins dans la doc, mais sans les tester. Nous avons trouvé des indications de compatibilité pour tous sauf OAuth SSO, Wordpress REST API, WP Rollback, WP User Avatars & Health Check & Troubleshouting. Nous n’avons pas non plus trouvé d’indications de compatibilité pour le thème Zakra utilisé (voir ci-dessous). De plus, il faudra faire une mis-à-jour des fichiers composer pour l’extension MongoDB pour PHP !
11.2.2 Thème du site
Un site Wordpress est complètement paramétrable et son apparence peut être facilement modifiée à l’aide de thèmes. Il en existe beaucoup. Nous vous conseillons Zakra version “free”, à jour, activement maintenu et totalement personnalisable. En jouant sur les options uniquement, nous avons pu façonner le site de telle manière qu’il reprenne une identité et les couleurs UMONS, tout en restant le plus simple, intuitif et facile d’accès possible.
11.2.3 Configuration serveur et git
Simple hosting de Gandi.net permet d’accéder aux fichiers sur le serveur de trois façons :
- Par sFTP (TODO: détails)
- Par Console SSH (TODO: détails). La console n’est pas active en permanence. Il faut l’activer dans le panneau de configuration du simple hosting sur Gandi.net. Cette activation reste valable pour 2 heures seulement par sécurité.
- Via git. C’est le plus simple pour développer et synchroniser son site. C’est d’ailleurs aussi la seule façon de faire pour ajouter des dépendances à PHP via composer (et nous aurons besoin de rajouter une dépendance par rapport à MongoDB pour enregistrer les évènements H5P xAPI dans notre base de données).
11.2.3.1 Sécurisation du site Wordpress
- Modification du fichier
.htaccessdanshtdocs. Afin d’éviter des attaques de type pingback xmlrpc sur le site Wordpress, il faut rajouter la ligne suivante dans le fichier.htaccess0 :
RewriteRule ^xmlrpc\.php$ "http\:\/\/0\.0\.0\.0\/" [R=301,L]Utilisation des plugins “Health Check & Troubleshooting” et “WP-Optimize” pour diagnostiquer et remédier aux problèmes potentiels. Un seul problème reste impossible à résoudre pour l’instant, il s’agit de “A plugin has prevented updates by disabling
wp_version_check().” qui peut avoir de nombreuses origines, et dans le cas de notre site, nous n’avons pas pu détecter la cause. Même en désactivant tous les plugins et le thème, le message reste. Un autre avertissement concerne la conservation de thème inutilisés. En effet, nous conservons les thèmes par défaut de Wordpress “Twenty Twenty” et “Twenty Twenty-One” car il est conseillé de les garder, au cas où Zakra aurait des problèmes. Enfin, nous utilisons aussi “Broken Link Checker”. Cet outil détecte les URL incorrectes dans la pages Wordpress uniquement (pas dans les bookdowns, donc), mais cela aide. Les “issues” étant des liens qui nécessitent une authentification, cet outil les détectent tous les quatee comme incorrects, mais nous pouvons ignorer ces avertissements également. Pour tester les liens dans les bookdowns, nous utilisons un plugin Chrome en plus.Nous avons aussi utilisé l’outil de sécurité et d’audit de Chrome dans les outils développeurs pour détecter les failles éventuelles et les erreurs côté client (Javascript, CSS, …), et nous assurer que le site est sain. Globalement, il n’y a pas de failles majeures, mais certains aspects pourraient être améliorés pour avoir un site plus rapide, par exemple. Nous examinerons ces points plus tard.
11.2.3.2 Utilisation de git
Il faut git et un client SSH installé (pas de problèmes pour macOS ou Linux). Les infos pour utiliser git sont dans la page de gestion du site sur Gandi.net. Dans un premier temps, l’identification se fait via un mot de passe. Voici comment cloner le dépôt git à partir d’un répertoire racine de votre choix, mais nous aurons absolument besoin que ce répertoire racine soit le même que celui où les dépôts GitHub de votre organisation sont également placés (sur macOS, il est facile de s’y placer en tapant cd suivi d’une espace, et puis en allant faire un drag&drop du dossier depuis le Finder vers le terminal, puis d’exécuter cette commande).
# Placez-vous dans le bon dossier
#cd <dossier racine des dépôts BioDataScience-Course>
git clone git+ssh://<ID>@git.sd3.gpaas.net/<SITE>.gitAccepter (yes) pour le message relatif à l’authenticité, puis rentrer le mot de passe d’administration du site. Vérifier que les fichiers du dépôt git ont bien été rajoutés dans le dossier avant de continuer. Avant de pouvoir effectuer un push via GitHub Desktop, il faut avoir configuré git correctement et avoir une clé SSH.
git config --global user.name <username>
git config --global user.email <user@email.com>
# Générer une clé SSH pour l'authentification
ssh-keygen -t rsa -b 4096 -C '<user@email.com>'Une fois la clé SSH générée, copier le contenu de la clé publique ~/.ssh/id_rsa.pub d’une part vers “SSH Keys” dans GitHub -> Settings -> SSH and GPG Keys (pour être aussi en ordre vis-à-vis de GitHub), et d’autre part, la fournir à l’administrateur de votre serveur Wordpress afin qu’il l’ajoute dans le panneau principal Simple hosting de Gandi.net (note : dans la section sécurité, cliquer sur “Ajouter une clé SSH”. Puis créer une nouvelle clé et y coller le contenu).
Avant de travailler dans un des bookdowns du cours, toujours se mettre à jour en local en faisant un pull dans le dépôt GitHub depuis RStudio, ainsi qu’un pull ou un fetch depuis GiHub Desktop sur le dépôt créé ci-dessus Essayez une petite modification anodine dans votre dépôt git en local, puis commit et push sur GitHub. A ce stade, ce sont les sources du bookdown qui sont synchronisées. Allez ensuite dans GitHub Desktop au dépôt et faites-y également un commit, et puis un push ou fetch. A ce moment-là, les pages du bookdown sont synchronisées avec le dépôt git de Gandi.net, mais pas encore publiées sur le site wp à ce stade ! Il faut déployer ces changements en faisant dans une fenêtre terminal :
cd <Répertoire de base qui contient le dossier wp.sciviews.org>
ssh <ID>@git.sd3.gpaas.net 'deploy <SITE>.git'Le deploy ajoute des nouveaux fichiers et remplace les fichiers existants sur le site (à condition que le droit en écriture sur les fichiers soit OK). Par contre, il n’élimine pas de fichiers. On risque donc d’accumuler des fichiers devenus inutiles au fur et à mesure de l’édition des blogdown. Si cela ne devrait pas impacter l’affichage des pages, cela utilise inutilement de l’espace disque sur le serveur. Ne procédez jamais à un nettoyage complet avec clean : cette instruction effacerait toute la configuration et la base de données de votre site Wordpress par la même occasion !
11.2.4 Ajout de mongodb pour PHP
Le serveur sur Gandi.net n’autorise qu’une seule manière de rajouter des dépendances pour PHP : via git + ssh en utilisant composer. Et il faut créer les fichiers composer.json et composer.lock sur une machine locale avant de pouvoir faire un push sur le serveur. Cela signifie d’avoir PHP et la dépendance mongodb pour PHP installés localement. Ceci n’est pas facile, et il faut les mêmes versions que sur le serveur.
Noter la version X.Y de PHP utilisée sur le serveur (ici 7.3). Il faudra la même en local.
Aller dans MongoDB Atlas et regarder la version de MongoDB déployée (ici 4.2). Il faudra une version de l’extension MongodB qui supporte à la fois la version de PHP et celle de MongoDB qui gère notre base de données.
Rechercher la version compatible dans le tableau relatif à PHP ici. Nous pouvons voir qu’il nous faut l’extension 1.6+ ou 1.7+, avec la librairie 1.5 ou 1.6, respectivement, et par ailleurs cette version de l’extension est bien compatible avec la version 7.3 de PHP.
Installer un (X)Ubuntu d’un version telle qu’il propose la bonne version de PHP dans VirtualBox. La 18.04LTS utilise PHP 7.2, pas bon. La 20.04LTS utilise la version 7.4 de PHP. Au final, une 19.10 convient, et c’est la version la plus récente avant qu’Ubuntu ne passe à PHP 7.4. Une machine virtuelle préinstallée peut être téléchargée depuis Osboxes. La façon de l’installer dans VirtualBox est expliquée sur le site. Le disque virtuel initial de la machine occupe 5,89Go.
Configurer la machine virtuelle dans VirtualBox pour avoir un dossier partagé, par exemple ‘Desktop’ partagé en ‘MacDesktop’, avec connexion automatique.
Lancer la machine virtuelle. Login : “oxboxes”, mot de passe : “oxboxes.org”, mais attention, en clavier configuré QWERTY. Avec un AZERTY, il faut entrer en fait “oxboxes:org” comme mot de passe.
Aller dans le panneau de configuration et changer le clavier (belge, ou français (Macintosh) par exemple).
Lancer un terminal et exécuter les lignes suivantes :
# Rendre le dossier partagé VirtualBox accessible pour l'utilisateur oxboxes
sudo usermod -aG vboxsf osboxes
# Mettre la machine à jour
sudo apt update
sudo apt upgrade
sudo apt autoremove
sudo apt autoclean
sudo apt clean
# Redémarrer
sudo reboot- Il se peut que la machine virtuelle rebascule en QWERTY. Vérifier et corriger à nouveau. Ensuite, installer PHP et ses dépendances nécessaires :
sudo apt install php7.3-cli php7.3-dev php-pear php-mongodb composerEnsuite, nous devrions pouvoir créer les fichiers nécessaires via la commande composer require mongodb/mongodb, mais cela ne fonctionne pas lorsque php-mongodb est installé via le package Ubuntu. Nous devons le compiler nous-même avec pecl sur la machine4 :
# Créer un répertoire dans le dossier partagé et s'y placer
mkdir /media/sf_MacDesktop/php-mongodb
cd /media/sf_MacDesktop/php-mongodb
# Compiler mongodb depuis les sources
sudo pecl install mongodb
# Créer composer.json et composer.lock (entre autres)
composer require mongodb/mongodbPour Xubuntu 20.04LTS et mongodb dernière version pour PHP 7.4, vous pouvez faire :
sudo apt install php7.4-cli php7.4-dev php-pear php-mongodb composer
mkdir ~/Desktop/php-mongodb
cd ~/Desktop/php-mongodb
sudo pecl install mongodb # Fails because it is not indicated in php.ini
# But the compilation of the .so file did succeed
composer require mongodb/mongodb # Warnings about deprecated composer 1 ignored- Copier
composer.jsonetcomposer.lockainsi obtenus à la racine du dépôt git, faire un commit, un push et un deploy (ssh <ID>@git.sd3.gpaas.net 'deploy wp.sciviews.org.git'). Cette fois-ci MongoDB PHP 1.6 semble s’être bien installé sur le serveur lors du deploy, mais pour l’upgrade à 1.11, il m’indique que je n’ai pas mongodb-ext 1.12.0, mais 1.10.0. Ceci peut aussi être vu à la console avec :
#php --ini
php -m # mongodb must be listed
php --re mongodb | head -1Cela signifie que la version max. de MongoDB lib qui peut être installée avec mon PHP 7.4 est la 1.9 si je ne veux pas mettre à jour également mongodb-ext. Donc :
sudo pecl uninstall mongodb
sudo pecl install mongodb-1.10.0
composer require mongodb/mongodb ^1.9Maintenant, vous avez les bons composer.json et composer.lock pour une version reconnue par MongoDB 7.0 (avec une limitation en lecture, mais ici, on n’accède que en écriture). Faire commit, push et deploy et vérifier que tout se passe bien.
- Faire un test dans Wordpress. Aller jusqu’à une contenu H5P quelconque sur le site et interagir avec lui. Aller ensuite voir si les données correspondantes ont bien été enregistrées dans notre MongoDB ATLAS, dans la collection
sdd.h5p. Si pas, vérifier si ces mêmes données sont enregistrées dans H5PxAPIkatchu dans le tableau de bord Wordpress. Si c’est le cas, c’est un problème d’accès à la base de données MongoDB ATLAS, sinon, c’est un problème plus profond : est-ce que l’enregistrement xAPI est bien activé, et est-ce que les extensions bookdown nécessaires ont bien été injectées grâce à une configuration correcte de {learnitdown} ? L’option de débogage de H5PxAPIkatchu devrait s’avérer utile ici pour déterminer ce qui ne va pas, voir 6.